css动画的示例分析

这篇文章主要为大家展示了"css动画的示例分析"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"css动画的示例分析"这篇文章吧。

　　CSS3动画是什么？

　　动画是使元素从一种样式逐渐变化为另一种样式的效果。使用@keyframes规则，你可以创建动画。

　　当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

　　指定至少这两个CSS3的动画属性绑定向一个选择器：

　　●规定动画的名称

　　●规定动画的时长

　　浏览器支持

　　表格中的数字表示支持该属性的第一个浏览器版本号。

　　紧跟在-webkit-,-ms-或-moz-前的数字为支持该前缀属性的第一个浏览器版本号。

　　1.png

　　@keyframes规则

　　语法

　　@keyframesanimationname{keyframes-selector{css-styles;}}

　　属性值：

　　●animationname必需的。定义animation的名称。

　　●keyframes-selector必需的。动画持续时间的百分比。

　　合法值：

　　●0-100%

　　●from(和0%相同)

　　●to(和100%相同)

　　●css-styles必需的。一个或多个合法的CSS样式属性

　　说明：

　　您可以改变任意多的样式任意多的次数。

　　请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。

　　0%是动画的开始，100%是动画的完成。

　　为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。

　　css动画示例

以上是"css动画的示例分析"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！