欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

animation动画的属性

程序员文章站 2022-03-09 20:17:57
...
/*添加动画效果*/
/*1.animation-name:指定动画名称*/
animation-name: moveTest;
/*2.设置动画的总耗时*/
animation-duration: 2s;
/*3.设置动画的播放次数,默认为1次  可以指定具体的数值,也可以指定infinite(无限次)*/
animation-iteration-count: 1;
/*4.设置交替动画  alternate:来回交替*/
animation-direction: alternate;
/*5.设置动画的延迟*/
animation-delay: 0s;
/*5.设置动画结束时的状态:默认情况下,动画执行完毕之后,会回到原始状态
forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,那么会立刻进行到初始状态
both:会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态*/
animation-fill-mode: both;
/*6.动画的时间函数*/
animation-timing-function: linear;
/*设置动画的播放状态  paused:暂停   running:播放*/
animation-play-state: running;
/* animation: moveTest 2s linear 0s infinite alternate both; */
相关标签: css css animation