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动画示例
　　

　　div
　　{
　　width:100px;
　　height:100px;
　　background:red;
　　position:relative;
　　animation:mymove5sinfinite;
　　-webkit-animation:mymove5sinfinite;/*SafariandChrome*/
　　}
　　@keyframesmymove
　　{
　　0%{top:0px;left:0px;background:red;}
　　25%{top:0px;left:100px;background:blue;}
　　50%{top:100px;left:100px;background:yellow;}
　　75%{top:100px;left:0px;background:green;}
　　100%{top:0px;left:0px;background:red;}
　　}
　　@-webkit-keyframesmymove/*SafariandChrome*/
　　{
　　0%{top:0px;left:0px;background:red;}
　　25%{top:0px;left:100px;background:blue;}
　　50%{top:100px;left:100px;background:yellow;}
　　75%{top:100px;left:0px;background:green;}
　　100%{top:0px;left:0px;background:red;}
　　}
　　
　　
　　
　　
　　
　　

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

相关推荐: jquery如何给元素增加类名

这篇文章主要介绍了jquery如何给元素增加类名的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jquery如何给元素增加类名文章都会有所收获，下面我们一起来看看吧。 两种增加方法：1、使用addClass()向被选元素添加一个或多…