1.属性:animation-name:检索或设置对象所应用的动画名称
语法:animation-name:keyframename/none;
(keyframename:指定要绑定到选择器关键帧的名称;
none:指定没有动画【可用于覆盖从级联的动画】)
2.属性:animation-duration:检索或设置对象动画的持续时间
语法:animation-duration:time;
(默认值为0,表示无动画效果)
3.属性:animation-timing-function:检索或设置对象动画的过渡类型
语法:animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out/step-start/step-end等;
(linear:线性过渡;
ease:平滑过渡;
ease-in:由慢到快;
ease-out:由快到慢;
ease-in-out:由慢到快再到慢;
step-start:相当于steps(1,start);
step-end:相当于steps(1,end); )
4.属性:animation-delay:检索或设置对象动画的延迟时间
语法:animation-delay:time;
(定义动画开始前等待的时间【默认为0】)
5.属性:animation-iteration-count:检索或设置对象动画的循环次数
语法:animation-iteration-count:infinite/<number>;
(infinite:无限次数循环;
<number>:为数字,默认值为“1”)
6.属性:animation-direction:在循环中是否反向运动
语法:animation-direction:normal/reverse/alternate/alternate-reverse/initial/inherit;
(normal:正常方向;
reverse:反方向运行;
alternate:先正常再反向,持续交替运行;
alternate-reverse:先反向再正常,持续交替运行)
7.属性:animation-fill-mode:规定当动画不播放时,要应用到元素的样式
语法:animation-fill-mode:none/forwards/backwards/both/initial/inherit;
(none:默认值【不设置】;
forwards:设置对象默认状态为动画结束时的状态;
backwards:设置对象默认状态为动画开始时的状态;
both:设置对象默认状态为动画结束或开始时的状态)
8.属性:animation-play-state:指定动画是否正在运行或已暂停
语法:animation-play-state:paused/running;
(paused:指定暂停动画;
running:默认,指定正在运行的动画;)
9.属性:will-change:提前通知浏览器将要做什么动画,让浏览器提前准备合适的优化设置
语法:will-change:auto/scroll-position/contents/<custom-ident>/<animateable-feature>;
(auto:无特定意图;
scroll-position:表示将要改变元素的滚动位置;
contents:表示将要改变元素的内容;
<custom-ident>:明确指定将要改变的属性与给定的名称;
<animateable-feature>:可动画的一些特征值,比如left/top/margin等)