css3动画 mignon_CSS3动画效果animation

利用CSS中animation为元素添加动画，代码格式为：

animation:动画名 .75s infinite;

-webkit-animation:动画名 .75s infinite; /*Safari and Chrome*/

第二句是为了兼容谷歌浏览器等，在指定动画时需要将元素指定为相对定位：position:relative;

接着为动画指定效果：

@keyframes 动画名

{

from {transform: none;}

to {transform: scale(1.6);}

}

@-webkit-keyframes 动画名

{

from {-webkit-transform: none;}

to {-webkit-transform: scale(1.6);}

}

完整例子：

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。