CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3 @keyfr am es 规则
要创建 CSS3 动画，你需要 了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将 逐步 从目前的样式更 改为 新的样式。
@keyframes my First /* myfirst 为动画名 */
{
From {background: red ;}
to {background: yellow;}
}
@- webkit -keyframes myfirst /* Safari 与 Ch rom e */
{
from {background: red;}
to {background: yellow;}
}
CSS3 动画
当在&nbs p; @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称 规定动画的时长实例：把&ldquo ;m yfirst] 动画捆绑到div元素上，时长5s.
div
{
animation: myfirst 5s;
-webk IT -animation: myfirst 5s; /* Safari 与 C hr ome */
}
注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
CSS3动画 是什么 ？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以 改变 任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的 开始 ，100% 是动画的完成。
为了得到最佳的浏览器支持，您 应该 始终定义 0% 和 100% 选择器。
实例:当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
接下来就是我写的小练习。通过css 动画使小球在草地上无限滚动，并加了两个按钮控制动画的运行与 暂停 （最上面的红球是我画的太阳2333）
总结
以上所述是小编给大家介绍的css3动画 小球滚动 js控制动画暂停， 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你 觉得 本文对你有帮助，欢迎 转载 ，烦请注明出处，谢谢！
总结
以上是 为你收集整理的 css3动画 小球滚动 js控制动画暂停 全部内容，希望文章能够帮你解决 css3动画 小球滚动 js控制动画暂停 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css3动画 小球滚动 js控制动画暂停的详细内容...