css3动画

目前浏览器都不支持 @keyframes 规则，Firefox 支持替代的 @-moz-keyframes 规则，Opera 支持替代的 @-o-keyframes 规则，Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

语法：@keyframes mymove {keyframes-selector {css-styles;}}

例：使一个div匀速向下移动

　　<p>本例在 IE9以及以下 都无效。</p>　

　　<div></div>　

　　div{
　　　　width:100px;
　　　　height:100px;
　　　　background:red;
　　　　position:relative;
　　　　animation:mymove 5s infinite;
　　　　-moz-animation:mymove 5s infinite; /* Firefox */
　　　　-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
　　　　-o-animation:mymove 5s infinite; /* Opera */

　　　　-ms-animation:mymove 5s infinite; /*IE10以及以上*/

　　}

　　@keyframes mymove{    /*必须先定义一个动画后面才可以直接调用动画名*/
　　　　from {top:0px;}
　　　　to {top:200px;}
　　}

　　@-moz-keyframes mymove /* Firefox */
　　{
　　　　from {top:0px;}
　　　　to {top:200px;}
　　}

　　@-webkit-keyframes mymove /* Safari and Chrome */
　　{
　　　　from {top:0px;}
　　　　to {top:200px;}
　　}

　　@-o-keyframes mymove /* Opera */
　　{
　　　　from {top:0px;}
　　　　to {top:200px;}
　　}

　　@-ms-keyframes mymove /* IE10以及以上 */
　　{
　　　　from {top:0px;}
　　　　to {top:200px;}
　　}

　

 

转载于:https://www.cnblogs.com/xiaofang-FE/p/6723260.html