CSS3--动画篇(animation)

来源:互联网 发布:js href blank 编辑:程序博客网 时间:2024/06/06 21:00

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等)


原创粉丝点击