常用animation动画

/*编辑动画名*/
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;

posted @ 2017-12-23 13:50  言成于思  阅读(368)  评论(0编辑  收藏  举报