起首我们来细致引见一下css3的动画属性，让人人相识每一个属性的作用。【相干视频教程：CSS3教程】
css3的动画属性
1、animation-name属性
animation-name属性：定义动画称号，用于指定由划定规矩定义的动画的一个或多个称号。
注：animation-name属性必需与划定规矩@keyframes合营运用，由于动画称号是由@keyframes定义声明的，假如供应多个属性值用逗号离隔。
@keyframes划定规矩相当于一个定名空间，背面跟一个名词，假如在class中的animation-name定义了与之对应的name就能够实行动画。
2、animation-duration属性
animation-duration属性用于指定实行一个周期动画应当花多长时候。
时候以秒或毫秒指定，而且最初设置为“0”，这意味着动画马上发作；我们能够指定一个持续时候或多个以逗号分开的持续时候。
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(<number>[,[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代码：
<div class="container">
<p class="text">
php 中文网
</p>
</div>
css代码：
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Gentium Basic', serif;
}
.container {
margin: 50px auto;
max-width: 700px;
}
.text {
font-size: 3em;
font-weight: bold;
color: #009966;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-animation: fall 4s infinite;
animation: fall 4s infinite;
}
@-webkit-keyframes fall {
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;
}
}
@keyframes fall {
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;
}
}
运转结果：
总结：以上就是本篇文章的全部内容，愿望能对人人的进修有所协助。
以上就是css3动画属性有哪些的细致内容，更多请关注ki4网别的相干文章！
