首页 > 代码库 > 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