本章给大家介绍css3-动画（animation）效果的实现，让大家了解一个简单的css3动画是如何实现的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css3-动画（animation）：
具有以下属性：
1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;
3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢 。
4、animation-delay 动画在启动前的延迟间隔，默认是0
5、animation-iteration-count 动画的播放次数，默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。 值：paused 指定暂停动画 ； running 指定正在运行的动画，默认。
代码实例（以平移–translate为例说明动画的整个过程）：
立即学习“前端免费学习笔记（深入）”；
.warp {height: 100px;width: 100px;border: 1px solid #eee;background-color: #21B4BB;animation-name: moves;animation-direction: alternate;animation-delay: 0.2s;animation-duration: 5s;animation-play-state: paused;animation-iteration-count: 3;/*以上可以简写成：*/animation: moves 5s linear 0.2s 3;}@keyframes moves {/*动画名称自定义*/10% {background-color: #21B4BB;/*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/transform: translate(100px, 0);-ms-transform: translate(100px, 0);/*IE 9*/-moz-transform: translate(100px, 0);/* Firefox */-webkit-transform: translate(100px, 0);/* Safari 和 Chrome */-o-transform: translate(100px, 0);/* Opera */}30% {background-color: #008000;/*时间点可以任意*/transform: translate(100px, 100px);-ms-transform: translate(100px, 100px);/*IE 9*/-moz-transform: translate(100px, 100px);/* Firefox */-webkit-transform: translate(100px, 100px);/* Safari 和 Chrome */-o-transform: translate(100px, 100px);/* Opera */}60% {background-color: #444444;/*时间点可以任意*/transform: translate(0, 100px);-ms-transform: translate(0, 100px);/*IE 9*/-moz-transform: translate(0, 100px);/* Firefox */-webkit-transform: translate(0, 100px);/* Safari 和 Chrome */-o-transform: translate(0, 100px);/* Opera */}100% {background-color: #70DBDB;/*时间点可以任意*/transform: translate(0, 0);-ms-transform: translate(0, 0);/*IE 9*/-moz-transform: translate(0, 0);/* Firefox */-webkit-transform: translate(0, 0);/* Safari 和 Chrome */-o-transform: translate(0, 0);/* Opera */}}
效果图：
以上就是css3-动画（animation）效果的实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611710.html
微信扫一扫 
支付宝扫一扫 
