作业题之动画改良
CSS3 有3種和動畫相關的屬性：transform, transition, animation。
其中 transform 描述了元素靜態(tài)樣式。而transition 和 animation 卻都能實現動畫效果。
所以它們常常配合使用，可以做到一些很炫的效果。
不同點：
1. ?觸發(fā)條件不同。transition通常和hover等事件配合使用，由事件觸發(fā)。animation則和gif動態(tài)圖差不多，立即播放。
2. 循環(huán)。 animation可以設定循環(huán)次數。
3. 精確性。 animation可以設定每一幀的樣式和時間。tranistion 只能設定頭尾。 animation中可以設置每一幀需要單獨變化的樣式屬性，
transition中所有樣式屬性都要一起變化。
4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結合更強大。js設定要變化的樣式，
transition負責動畫效果，天作之合，比之前只能用js時爽太多。
?
結論：
1. 如果要靈活定制多個幀以及循環(huán)，用animation.
2. 如果要簡單的from to 效果，用 transition.
3. 如果要使用js靈活設定動畫屬性，用transition.
?
以上是摘抄別人的博文的。
?
transition和animation是不能一起共同一起使用的。
這次作業(yè)有個要做動畫的效果。
達標效果：
這個是用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)
?
轉載于:https://www.cnblogs.com/zhangzhicheng/p/5767963.html
總結
- 上一篇： 根据输入时间段备份压缩日志文件
- 下一篇： Moocryption