作业题之动画改良
CSS3 有3种和动画相关的属性：transform, transition, animation。
其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。
所以它们常常配合使用，可以做到一些很炫的效果。
不同点：
1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性，
transition中所有样式属性都要一起变化。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，
transition负责动画效果，天作之合，比之前只能用js时爽太多。
结论：
1. 如果要灵活定制多个帧以及循环，用animation.
2. 如果要简单的from to 效果，用 transition.
3. 如果要使用js灵活设定动画属性，用transition.
以上是摘抄别人的博文的。
transition和animation是不能一起共同一起使用的。
这次作业有个要做动画的效果。
达标效果：
这个是用transition简单的过渡动画效果，由于好像不是很美观，所以改良了一下。
改良效果：
这个是使用animation的动画效果实现的，可以看出动画比较丰富一些，不会只有一种动画在动。
改良代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zuoye2</title>
<style>
div{
margin: 50px auto 0;
width: 600px;
height: 194px;
background: url(bg_icon.png) 158px 46px/144px 66px,
url(21.png) 510px 194px/24px 24px,
url(22.png) 539px 194px/23px 24px,
url(23.png) 568px 194px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
animation: doMove01 1s forwards;
}
@keyframes doMove01{
0%{background: url(bg_icon.png) 150px 32px/175px 96px,
url(21.png) 510px 163px/24px 24px,
url(22.png) 539px 163px/23px 24px,
url(23.png) 568px 163px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;}
100%{
background: url(bg_icon.png) 158px 46px/144px 66px,
url(21.png) 510px 194px/24px 24px,
url(22.png) 539px 194px/23px 24px,
url(23.png) 568px 194px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
}
div:hover{
animation: doMove 1.3s forwards;
}
@keyframes doMove{
0%{background: url(bg_icon.png) 156px 44px/147px 69px,
url(21.png) 510px 194px/24px 24px,
url(22.png) 539px 194px/23px 24px,
url(23.png) 568px 194px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
5%{background: url(bg_icon.png) 155px 43px/150px 72px,
url(21.png) 510px 170px/24px 24px,
url(22.png) 539px 182px/23px 24px,
url(23.png) 568px 194px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
10%{background: url(bg_icon.png) 154px 41px/153px 75px,
url(21.png) 510px 158px/24px 24px,
url(22.png) 539px 170px/23px 24px,
url(23.png) 568px 182px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
20%{background: url(bg_icon.png) 153px 39px/159px 81px,
url(21.png) 510px 137px/24px 24px,
url(22.png) 539px 149px/23px 24px,
url(23.png) 568px 161px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
25%{background: url(bg_icon.png) 152px 38px/162px 84px,
url(21.png) 510px 149px/24px 24px,
url(22.png) 539px 137px/23px 24px,
url(23.png) 568px 149px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
30%{background: url(bg_icon.png) 151px 36px/165px 87px,
url(21.png) 510px 161px/24px 24px,
url(22.png) 539px 149px/23px 24px,
url(23.png) 568px 137px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
35%{background: url(bg_icon.png) 150px 34px/168px 90px,
url(21.png) 510px 163px/24px 24px,
url(22.png) 539px 161px/23px 24px,
url(23.png) 568px 149px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
40%{background: url(bg_icon.png) 150px 32px/171x 93px,
url(21.png) 510px 163px/24px 24px,
url(22.png) 539px 163px/23px 24px,
url(23.png) 568px 161px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
45%{background: url(bg_icon.png) 150px 32px/175px 96px,
url(21.png) 510px 163px/24px 24px,
url(22.png) 539px 163px/23px 24px,
url(23.png) 568px 163px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
100%{background: url(bg_icon.png) 150px 32px/175px 96px,
url(21.png) 510px 163px/24px 24px,
url(22.png) 539px 163px/23px 24px,
url(23.png) 568px 163px/23px 24px,
url(zuoye-2.png);
background-repeat:no-repeat;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
有更好的意见和想法请评论一下。前提是纯css实现的。(O ^ ~ ^ O)
