这篇文章主要为大家展示了css动画效果之animation的常用样式有哪些，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“css动画效果之animation的常用样式有哪些”这篇文章吧。
animation动画
定义一个动画：
/*设置一个关键帧，定义动画每一步执行的动作*/
@keyframes mybox{
0%{transform: translate(0,0);}
25%{transform: translate(200px,0);}
50%{transform: translate(200px,200px);}
75%{transform: translate(0,200px);}
100%{transform: translate(0,0);}
}/*引用关键帧，设置动画的执行样式*/ animation: mybox 5s 1s infinite;
注：
1、动画结束后回到初始位置。
2、from->0% to ->100%
animation-name: 动画的名字，（必须存在）
animation-duration: 动画持续的时间
animation-delay:规定多长时间后出现动画效果
animation-iteration-count: 定义动画执行的次数
默认值是：1； 无限次数：infinite
animation-timing-function: 定义动画的效果animation-fill-mode:
none:默认值； 样式在延迟之后生效；
backwards： 样式在延迟之前生效；
forwards： 在动画结束之后，停在终点位置；
both: 具备backwards和forwards的特性；
以上就是关于“css动画效果之animation的常用样式有哪些”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
