1. animation-name(动画名称)
元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
div{ 100px; height:100px; background:red; position:relative; animation-name:mymove; animation-duration:5s; }
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
2. keyframes(关键帧)
被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
div{ 100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
}
@keyframes FromLeftToRight{ 0%{left: 0; } 100%{ left: 800px; } }
3. animation-duration(动画时间)
div{ -webkit-animation-duration:1s; animation-duration:1s/*所需的动画时间1秒*/
}
4. animation-timing-function(动画的过渡速度)
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
div{ -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in;/*动画的过渡速度是由慢到快*/ }
5. animation-delay(动画延迟时间)
div{ animation-delay:2s;/*延迟2秒*/ }
6. animation-iteration-count(动画执行次数)
infinite:表示无限次数
div { animation-iteration-count:3;/*动画执行的次数是3次*/ }
7. animation-direction(动画的顺序)
属性值:
normal:正常方向,默认值。
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
div{ animation-direction : normal; /*正常方向,默认值*/ animation-direction : reverse; /*反方向运行*/ animation-direction : alternate; /*动画先正常运行再反方向运行,并持续交替运行*/ animation-direction :alternate-reverse; /*动画先反向运行再正常运行,并持续交替运行*/ }
8. animation-play-state(动画的状态)
属性值:
running:运动
paused:暂停
div:hover{ animation-play-state:paused; /*暂停*/ }
9. animation-fill-mode(动画时间之外的状态)
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态
div { animation-fill-mode :forwards; /*设置对象状态为动画结束时的状态*/ }
10. animation(动画复合属性)
语法:
animation:[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]
可以将以上属性缩写。例如以下代码:
div{ animation: FromLeftToRight 2s ease-out forwards; }