首页 > 代码库 > CSS3动画
CSS3动画
CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
动画执行完毕之后会变为原始样式。
实例：一个沿正方形轨迹移动的<div>
div{ width: 100px; height: 100px; background: red; animation: ani1 5s; -webkit-animation: ani1 5s; -moz-animation: ani1 5s; -o-animation: ani1 5s; position: absolute;}@keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;}}//Safari and Chrome@-webkit-keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;}}//Firefox@-moz-keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;}}//Opera@-o-keyframes ani1{ 0%{background: red; top: 0px; left: 0px;} 25%{background: yellow; top: 0px; left: 100px;} 50%{background: grey; top: 100px; left: 100px;} 75%{background: purple; top: 100px; left: 0px;} 100%{background: green; top: 0px; left: 0px;}}
CSS3动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。