常用animation动画

Posted 2020-10-18

/*编辑动画名*/
animation-name: myDemo;

/*动画持续时间*/
animation-duration: 6s;

/*动画方向*/
/*reverse 反向*/
/*alternate 从后向前播放动画*/
/*alternate-reverse 从后向前播放动画且反向*/
animation-direction: alternate;

/*动画执行次数*/
/*infinite 循环播放*/
animation-iteration-count: infinite;

/*动画结束后的位置*/
/*forwards 保留最后一个属性值*/
animation-fill-mode: forwards;

/*动画延迟*/
animation-delay: 1s;

/*动画运动方式*/
/*linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。*/
animation-timing-function: linear;