首页 > 代码库 > CSS3动画效果animation
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);}
}
完整例子：
效果链接：http://www.w3school.com.cn/tiy/t.asp?f=css3_animation
<!DOCTYPE html>
<html>
<head>
<style>
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;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>
CSS3动画效果animation