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://myzitong.com/article/psecgj.html