css动画效果之animation的常用样式有哪些

这篇文章主要为大家展示了css动画效果之animation的常用样式有哪些，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“css动画效果之animation的常用样式有哪些”这篇文章吧。

隆林网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。创新互联公司2013年至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

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的常用样式有哪些”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注创新互联行业资讯频道。

分享文章：css动画效果之animation的常用样式有哪些
分享路径：http://shouzuofang.com/article/psecgj.html