本文深入解析CSS3中的动画(Animations)与过渡(Transitions)的区别，并通过代码实例展示如何使用关键帧定义动画效果，实现从背景颜色的循环变化，到鼠标悬停时的动态过渡，充分展现CSS3的强大动画能力。
Animations与Transitions有神马区别？
上面的50%则是当动画执行到50%也就是一半处，所执行的代码。而0%和100%就是开始帧（开始值）和结束帧（结束值），如果只有开始值和结束值的动画，我们就可以使用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来做动画了。
扫一扫
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
