您的位置：首页 > Web前端 > CSS

CSS3动画属性-Animations

2012-03-14 18:22 232 查看
Animations与Transitions有神马区别？

　　使用Transitions时只能通过指定属性的开始值和结束值，然后在这两个属性之间进行平滑过渡的方式来实现动画效果，因此它不能实现比较复杂的动画效果；而Animations则可以通过多种方式定义中的元素属性值来实现更为复杂的动画效果。

Animations：

animation-name:指定动画关键帧名称；（需要我们自己定义）

animation-duration:动画执行时间；（比如1s表示1秒）

animation-timing-funcion:表示执行什么种类的动画，也就是动画执行的计算种类；

animation-iteration-count:动画执行次数，整数为多少表示执行多少次，infinite表示循环执行；

Animations关键帧的定义：

@keyframes 关键帧名称

{

　　0%{需要执行动画的属性与值}

50%{需要执行动画的属性与值}

100%{需要执行动画的属性与值}

}

<!DOCTYPE HTML>

<html>

<head>

<meta charset="gb2312">

<title>CSS3每日一练之动画属性-Animations | 前端开发网(W3Cfuns.com)！</title>

<style type="text/css">

*{margin:0; padding:0;}

body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}

#box

{

margin:0 auto;

width:200px;

height:200px;

line-height:200px;

color:#fff;

text-align:center;

font-size:14px;

background:#f00;

}

@-webkit-keyframes w3cfunsColors

{

0%{background:#f00;}

25%{background:#f0f;}

50%{background:#00f;}

75%{background:#0f0;}

100%{background:#ff0;}

}

#box:hover

{

-webkit-animation:w3cfunsColors 6s linear;

background:#ff0;

}

</style>

</head>

<body>

<div id="box">前端开发网(W3Cfuns.com)！</div>

</body>

</html>

上面的50%则是当动画执行到50%也就是一半处，所执行的代码。而0%和100%就是开始帧（开始值）和结束帧（结束值），如果只有开始值和结束值的动画，我们就可以使用Transitions来做动画了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航