css3动画属性有哪些

　　css3动画属性有哪些

让咱们了解在css3中有哪些动画特点，最终运用css3动画特点和@keyframes规矩创建一个简单的动画。有一定的参考价值，有需求的朋友能够参考一下，期望对你们有所协助。
首要咱们来详细介绍一下css3的动画特点，让咱们了解每个特点的作用。
css3的动画特点
1、animation-name特点
animation-name特点：界说动画称号，用于指定由规矩界说的动画的一个或多个称号。
注：animation-name特点必须与规矩@keyframes合作运用，因为动画称号是由@keyframes界说声明的，假如提供多个特点值用逗号离隔。
@keyframes规矩相当于一个命名空间，后面跟一个名词，假如在class中的animation-name界说了与之对应的name就能够履行动画。
2、animation-duration特点
animation-duration特点用于指定履行一个周期动画应该花多长时刻。
时刻以秒或毫秒指定，而且开端设置为“0”，这意味着动画即时产生；咱们能够指定一个持续时刻或多个以逗号分隔的持续时刻。
【相关视频教程：CSS3教程】
3、animation-timing-function特点
animation-timing-function特点是用来设置播映方法的，它能够指定守时函数，该函数界说动画目标随时刻的速度。它描绘了动画在其持续时刻的一个周期内怎么发展，答应它在其过程中改动速度。
取值如下：
ease：缓解作用，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性作用，速度将从开端到完毕稳定。
ease-in：渐显作用，动画将缓慢发动，然后获得更多加速并稳定到持续时刻完毕。
ease-out：渐隐作用，动画将快速发动，然后减速并稳定到持续时刻完毕。
ease-in-out：渐显渐隐作用，它是组合了ease-in和ease-out。动画或过渡将开端缓慢，在中心加速，然后减速直至完毕。
step-start：马上跳转到动画完毕状况，动画或过渡将突然变为完毕状况并保持在该方位直到动画完毕。
step-end：动画或过渡保持其开端状况，直到动画履行完毕，直接跳转到其动画完毕状况。
step([,[start|end]])：
step()能够将转化的持续时刻划分为相等巨细的距离；或指定输出百分比的变化是产生在距离的开端仍是完毕。
第一个参数number为指定的距离数，即把动画分为n步阶段性显示，第二个参数默认为end，设置最终一步状况，start为完毕时的状况，end为开端时的状况，若设置与animation-fill-mode的作用冲突，以animation-fill-mode的设置为动画完毕状况。
cubic-bezier(,,,)：特别的立方赛贝尔曲线作用
4、animation-delay特点
animation-delay特点：界说动画何时开端（开端时刻），它答应动画在使用后的某个时刻开端履行，或许在使用之前看似现已开端履行一段时刻。
初始值为“0”，这意味着动画将在使用于元素后当即开端播映。正时刻值表明偏移量，该偏移量界说动画开端之间（经过动画特点将动画使用于元素时）与开端履行时的延迟时刻。
咱们还能够为animation-delay提供负值。负值，就像’0’相同，意味着动画一旦被使用，就会当即履行，可是由延迟的绝对值主动推动，就好像动画在曩昔现已发动了指定的时刻，而且它好像现已在其游戏周期的中途开端了。例如，假如为animation-delay提供“-2S”的值，动画将当即发动，只要它被使用，但它将显示为它现已发动2s之前，你现已使用它。
5、animation-iteration-count特点
animation-iteration-count特点：用于指定动画中止前播映动画循环的次数，即：播映次数。
初始值为“1”，表明动画将从头到尾播映一次；通常会取“infinite”值，表明无限循环播映。

6、animation-direction特点
animation-direction特点：用于指定动画是否应在某些或一切循环或迭代中反向播映，即：播映方向。
该特点可能取的值：
normal：正常方向
reverse：动画反向运转，方向始终与normal相仿
alternate：动画会循环正反替换运动
7、animation-fill-mode特点
animation-fill-mode特点界说动画在播映后的状况。更具体地说，它界说了在动画延迟时刻内以及动画完成履行后使用于元素的款式。
该特点可能取的值：
none：默认值，不设置款式
forwards：完毕后保持动画完毕的状况
backwards：完毕后回来动画开端时状况
both：完毕后可遵循forwards和backwards两个规矩
8、animation-play-state特点
animation-play-state特点：用于检索或设置目标动画的状况，即：指定CSS动画是正在运转仍是暂停。
该特点可能取的值：
running：默认值，运动；
paused：暂停。
咱们也能够运用动画的简写特点animation特点来一次性设置动画的款式：
/*一个动画界说的语法*/
animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];
/*两个动画界说，用逗号离隔*/
animation：animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state],
[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];
css3动画特点和@keyframes规矩创建简单动画：
代码实例：
HTML代码：
css代码：
@importurl(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body{
background-color:#F5F5F5;
color:#555;
font-size:1.1em;
font-family:’GentiumBasic’,serif;
}
.container{
margin:50pxauto;
max-width:700px;
}
.text{
font-size:3em;
font-weight:bold;
color:#009966;
-webkit-transform-origin:leftcenter;
-ms-transform-origin:leftcenter;
transform-origin:leftcenter;
-webkit-animation:fall4sinfinite;
animation:fall4sinfinite;
}
@-webkit-keyframesfall{
from,15%{
-webkit-transform:rotate(0)translateX(0);
transform:rotate(0)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
}
50%,60%{
-webkit-transform:rotate(90deg)translateX(0);
transform:rotate(90deg)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.13,.84,.82,1);
animation-timing-function:cubic-bezier(.13,.84,.82,1);
}
85%,to{
-webkit-transform:rotate(90deg)translateX(200px);
transform:rotate(90deg)translateX(200px);
opacity:0;
}
}
@keyframesfall{
from,15%{
-webkit-transform:rotate(0)translateX(0);
transform:rotate(0)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
animation-timing-function:cubic-bezier(.07,2.02,.67,.57);
}
50%,60%{
-webkit-transform:rotate(90deg)translateX(0);
transform:rotate(90deg)translateX(0);
opacity:1;
-webkit-animation-timing-function:cubic-bezier(.13,.84,.82,1);
animation-timing-function:cubic-bezier(.13,.84,.82,1);
}
85%,to{
-webkit-transform:rotate(90deg)translateX(200px);
transform:rotate(90deg)translateX(200px);
opacity:0;
}
}