作业题之动画改良
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)
