css动画效果之animation的常用样式css常用样式font设置字体的多种变换(实例详解)浅谈html5标签css3的常用样式css 常用样式(分享)20个CSS/CSS3常用样式汇总CSS常用样式简单的总结包括定位、显示等属性CSS常用样式之绘制双箭头的示例代码

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的常用样式内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！