温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3怎么设置动画

发布时间:2022-03-08 11:07:27 来源:亿速云 阅读:129 作者:iii 栏目:web开发

本篇内容主要讲解“css3怎么设置动画”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3怎么设置动画”吧!

  首先我们来了解一下css3实现简单动画需要用到的属性:animation属性,@keyframes“规则”。

  animation属性和@keyframes“规则”是css3新增的属性,animation属性可用来给动画设置许多的CSS样式,例如color,background-color,height,或width。

  我们先通过@keyframes“规则”定义,再在animation属性里调用,就可以实现一个简单的动画效果了。

  如下所示:实现背景颜色的不断切换

  .element{

  animation:pulse5sinfinite;

  }

  @keyframespulse{

  0%{

  background-color:#001F3F;

  }

  100%{

  background-color:#FF4136;

  }

  }

  运行后,背景颜色会不断的进行变化,在#001F3F颜色值到#FF4136颜色值过渡变化,之间也会显示一些过渡的背景色。大家可以自己动手试试效果。

  每个@keyframes规则定义了在动画期间中的特定时刻应该发生的事情。例如,0%是动画的开头,100%是结束。然后可以通过速记animation属性或其八个子属性来控制这些关键帧,以更好地控制应如何操纵这些关键帧。

  下面我们来看看animation属性的子属性有哪些?有什么作用?

  1、animation-name:声明@keyframes要操作的at-rule的名称。

  2、animation-duration:动画完成一个循环所需的时间长度。

  3、animation-timing-function:建立预设的加速度曲线,如ease或linear。

  4、animation-delay:正在加载的元素和动画序列的开始之间的时间。

  5、animation-direction:设置循环后动画的方向。它的默认值在每个周期重置。

  6、animation-iteration-count:动画应执行的次数。

  7、animation-fill-mode:设置在动画之前/之后应用的值。

  例如,我们可以将动画的最后状态设置为保留在屏幕上,也可以将其设置为在动画开始之前切换回。

  8、animation-play-state:暂停/播放动画。

  然后可以像这样使用这些子属性:

  @keyframesstretch{

  /*在这里声明动画的动作*/

  }

  .element{

  animation-name:stretch;

  animation-duration:1.5s;

  animation-timing-function:ease-out;

  animation-delay:0s;

  animation-direction:alternate;

  animation-iteration-count:infinite;

  animation-fill-mode:none;

  animation-play-state:running;

  }

  /*

  相同:

  */

  .element{

  animation:

  stretch

  1.5s

  ease-out

  0s

  alternate

  infinite

  none

  running;

  }

css3怎么设置动画

到此,相信大家对“css3怎么设置动画”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI