脚本宝典收集整理的这篇文章主要介绍了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的常用样式的文章就介绍到这了,更多相关css animation的常用样式内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的css动画效果之animation的常用样式全部内容，希望文章能够帮你解决css动画效果之animation的常用样式所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。