CSS3 动画属性

发布时间：2019-09-03 09:11:54编辑：auto阅读（4738）

CSS3 动画
虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态， 模拟一种过渡动画效果，但它的功能是非常有限的。 因此，CSS3 新增了一个动画属性animation。与过渡属性transition属性不同的是，CSS3 的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步， 实现更为复杂的动画效果。
CSS3中通过animation实现动画和transition实现动画非常类似，都是通过改变元素的属性值来实现动画效果的。
它们的区别主要在于：使用 transition属性只能通过指定属性的初始状态和结束状态，然后在两个状态之间进行平滑过渡的方式来实现动画。
而animation实现动画效果主要由两个部分组成：
1). 通过类似Flash动画中的关键帧来声明一个动画；
2). 在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。
CSS3动画属性animation和CSS3的transition属性一样是一个复合属性，它包含了8个属性：
animation-name，主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画， 从而执行动画。
animation-duration，主要用来设置动画播放所需时间，一般以秒为单位。
animation-timing- function主要用来设置动画的播放方式，与transition-timing-function类似。
http:/ /www.iis7.com/b/wzjk/
animation-delay、主要用来指定动画开始时间，一般以秒为单位。
animation-iteration- count、主要用来指定动画播放的循环次数。
animation-direction、主要用来指定动画的播放方向。
animation-play- state，主要用来控制动画的播放状态。
animation-fill- mode，主要用来设置动画的时间外属性。br/>：关键帧
在CSS3中，把@keyframes称为关键帧
@keyframes 的作用：
transition制作一个简单的动画效果时，包括了元素的初始属性和最终属性，一个开始执行动作时间和一个延迟动作时间以及一个动作变换速率， 其实这些值都是一个中间值，如果要控制得更细一些，比如说要第一个时间段执行什么动作，第二个时间段执行什么动作（换到Flash制作动画中来说，就是第一帧要执行什么动作，第二帧执行什么动作）， 这样用transition 就很难实现了，此时也需要一个“ 关键 帧”来控制。 在CSS3中就是通过@keyframes属性来实现这样的效果的。br/>@keyframes的语法：
@keyframes具有其自己的语法规则，命名是由@keyframes开头，后面紧跟着是“动画的名称”加上一对花括号“{...}”，括号中就不同时间段样式规则，有点像CSS的样式写法。一个@keyframes中的样式规则是由多个百分比构成的，如0%～100%，可以在这个规则中创建更多个百分比，分别给每个百分比中需要有动画效果的元素加上不同的属性，从而让元素达到一种不断变化的效果，比如说移动，再比如改变元素颜色、位置、大小和形状等。 不过有一点需要注意， 可以使用“ frome”“to”代表一个动画是从哪开始，到哪结束，也就是说from就相当于0%，而to相当于100%。值得说的是，0%不能像别的属性取值一样把百分比符号省略，在这里必须加上百分符号（%）。如果没有加上，这个@keyframes是无效的，不起任何作用。因为@keyframes的单位只接受百分比值。@keyframes可以指定任何顺序排列来决定animation动画变化的关键位置
CSS中为元素应用动画：
要在CSS中为元素应用动画， 首先要创建一个已命名的动画，然后将它附加到该元素属性声明块中的一个元素上。 动画本身并不执行任何操作； 为了向元素应用动画，需要将动画与元素关联起来。这个要创建的动画，必须使用@keyframes来声明（或者对于当前的Webkit实现，使用@-webkit-keyframes），后跟所选择的名称，该名称主要用于对动画的声明作用，然后指定关键帧。
：CSS3动画8个子属性详解



1. animation-name 调用动画
   animation-name属性，主要是用来调用动画，其调用的动画是通过@keyframes关键帧定义好的动画。 该属性的使用语法如右所示： animation-name: none | IDENT[ none| DENT]*;
   animation-name 是用来定义一个动画的名称， 其主要有两个值。
   ·IDENT：是由@keyframes创建的动画名称， 换句话说 此处的 IDENT(标识符)需要和@keyframes中的IDENT一致， 如果不一致将不能实现任何动画效果。
   ·none：为默认值，当值为none 时，将没有任何动画效果，其可以用于覆盖任何动画。
2. animation-duration设置动画播放时间
   animation-duration主要用来设置CSS3动画播放时间， 其基本语法如右所示： animation- duration: < time>[< time>]*
   animation-duration和transition-duration使用方法类似，是用来指定元素播放动画所持续的时间，也就是完成从0% ～100% 一次动画所需时间， 取值< time>为数值，单位为秒，其默认值为 0，这意味着动画周期为0，也就是没有动画效果。如果值为负值会被视为0。
3. animation-timing-function 设置动画播放方式
   animation-timing-function属性主要是用来设置动画播放方式， 其基本语法如右所示： animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out
   animation-timing-function是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。 他和transition中的transition-timing-function一样， 具有以下几种变换方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。
4. animation-delay 设置动画开始播放的时间
   animation-delay属性用来定义动画开始播放的时间、 是延迟还是提前等。 该属性的基本语法右所示： animation- delay:< time>[,< time>]* 换句话说， animation- delay 属性用于定义在浏览开始 执行动画之前等待的时间。
5. animation-iteration-count 设置动画播放次数
   animation-iteration-count 属性主要用来定义动画的播放次数。其基本语法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此属性主要用于定义动画播放多少次，其值通常为整数，但也可以使用带有小数的数字。其默认值 1，这意味着动画将从开始到结束只播放一次。 如果取值为infinite，动画将会无限次地播放。infinite(无限循环)
6. animation-direction 设置动画播放方向
   animation-direction属性主要用来设置动画播放方向， 其基本语法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用来指定元素动画播放的方向， 其主要有两个值， 默认值为 normal， 如果设置为normal时， 动画的每次循环都是向前播放； 另一个值是alternate，它的作用是，动画播放为偶数次则向前播放，为奇数次则向反方向播放。 例如一个弹跳动画中， 可以为落下的球提供关键帧， 然后将animation-direction取值为alternate来控制播放动画的每秒中反转它。
7. animation-play-state 设置动画的播放状态
   animation-play-state属性主要用来控制元素动画的播放状态， 其基本语法如右所示： animation-play-state: running | paused [, running | paused]* 主要有两个值： running 和paused。 其中running为默认值， 主要作用类似于音乐播放器， 可以通过paused将正在播放的动画停下来， 也可以通过running将暂停的动画重新播放， 这里的重新播放不一定是从元素动画的开始播放， 也可能是 从暂停的那个位置开始播放。 另外如果暂停了动画的播放， 元素的样式将回到最原始设置状态。
8. 设置动画时间外属性 animation-fill-mode
   animation-fill-mode属性定义在动画开始之前和结束之后发生的操作，其基本语法如右所示： animation-fill-mode: none | forwards | backwards | both 主要有四个值：none、forwards、backwards和both。其默认值为none，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。当其取值为forwards时，动画在结束后继续应用最后关键帧的位置。当其取值为backwards时，会在向元素应用动画样式时迅速应用动画的初始帧。当其取值为both时，元素动画同时具有forwards和backwards效果。在默认情况之下，动画不会影响它的关键帧之外的 属性， 但使用animation-fill-mode属性， 可以修改动画的默认行为。简单地理解就是告诉动画在第一个关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画第一帧 上， 或者同时具有这两个效果。

关键字：