animation动画的使用

div{width:200px;margin:100px auto;animation:rotate 3s linear infinite;animation-duration:3s;动画完成一个周期所用的时间,以秒计算animation-name:rotate;规定@keyframes动画的名称animation-timing-function:ease-in-out(低速开始和结束);规定动画的速度曲线,linear-匀速,ease- 低速*快*慢animation-delay:2s;动画开始前的延迟(可选);animation-iteration-count:1;规定动画被播放的次数,默认1,infinite无限播放animation-direction:normal;规定动画是否在下一周期逆向播放,normal正常播放,alternate轮流 反向播放}div img{width:100%;}@keyframes rotate{0%{transform: rotateZ(0deg);}100%{transform:rotateZ(360deg)}}

 

转载于:https://www.cnblogs.com/chenchenhao/p/9890014.html

总结

以上是生活随笔为你收集整理的animation动画的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。