CSS3特效之動畫animation

animation

漸變背景動畫

懸停背景漸變

1. @-webkit-keyframes changeBg{
2. 0%{background-color:#000;}
3. 20%{background-color:#300;}
4. 40%{background-color:#600;}
5. 60%{background-color:#900;}
6. 80%{background-color:#f00;}
7. }
8. @-moz-keyframes changeBg{
9. 0%{background-color:#000;}
10. 20%{background-color:#300;}
11. 40%{background-color:#600;}
12. 60%{background-color:#900;}
13. 80%{background-color:#f00;}
14. }
15. @keyframes changeBg{
16. 0%{background-color:#000;}
17. 20%{background-color:#300;}
18. 40%{background-color:#600;}
19. 60%{background-color:#900;}
20. 80%{background-color:#f00;}
21. }
22. .animation-1{ width:200px; height:30px; line-height:30px; text-align:center; background-color:#000; color:#fff; }
23. .animation-1:hover{ -webkit-animation:changeBg 2s linear; -moz-animation:changeBg 2s linear; animation:changeBg 2s linear; background-color:#f00; }

文字移動動畫

懸停我就移動

2. @-webkit-keyframes textMove{
3. 0%{ padding-left:0px;}
4. 20%{ padding-left:50px;}
5. 40%{ padding-left:100px;}
6. 50%{ padding-left:125px;}
7. 60%{ padding-left:100px;}
8. 80%{ padding-left:50px;}
9. }
10. @-moz-keyframes textMove{
11. 0%{ padding-left:0px;}
12. 20%{ padding-left:50px;}
13. 40%{ padding-left:100px;}
14. 50%{ padding-left:125px;}
15. 60%{ padding-left:100px;}
16. 80%{ padding-left:50px;}
17. }
18. @keyframes textMove{
19. 0%{ padding-left:0px;}
20. 20%{ padding-left:50px;}
21. 40%{ padding-left:100px;}
22. 50%{ padding-left:125px;}
23. 60%{ padding-left:100px;}
24. 80%{ padding-left:50px;}
25. }
26. .animation-2{ background-color:pink; padding:10px 0;}
27. .animation-2:hover{ -webkit-animation:textMove 2s linear; -moz-animation:textMove 2s linear; animation:textMove 2s linear;}

簡單的複合動畫

My Lab

前端實驗室

My Lab

1. /*由於代碼較多，此處只附上加-webkit前綴*/
2. .animation-3{ position:relative; width:200px; height:100px; padding:10px; background-color:#ccc;}
3. .animation-3 p{ opacity:0;}
4. .txt-1{
5. margin-left:60px;
6. -webkit-animation:txt-1-move 2s ease-out;
7. -moz-animation:txt-1-move 2s ease-out;
8. animation:txt-1-move 2s ease-out;
9. }
10. @-webkit-keyframes txt-1-move{
11. 0%{margin-left:0px;opacity:0;}
12. 50%{margin-left:30px;opacity:1; -webkit-transform:skew(-15deg);}
13. 70%{margin-left:35px;opacity:1;}
14. 100%{margin-left:60px;opacity:0; -webkit-transform:skew(-30deg);}
15. }
16.  
17. .txt-2{
18. opacity:1;
19. height:36px;
20. margin-top:10px;
21. font:18px/36px "Microsoft Yahei";
22. -webkit-animation:txt-2-move 4s ease-out 4s;
23. -moz-animation:txt-2-move 4s ease-out 4s;
24. animation:txt-2-move 4s ease-out 4s;
25. }
26. @-webkit-keyframes txt-2-move{
27. 0%{margin-left:0px; opacity:0;}
28. 30%{margin-left:50px; opacity:1;}
29. 35%{margin-left:55px; opacity:1;}
30. 40%{margin-left:55px; opacity:1;}
31. 41%{margin-left:55px; opacity:1; -webkit-transform:skew(-30deg)}
32. 45%{margin-left:55px; opacity:1;}
33. 50%{margin-left:50px; opacity:1;}
34. 60%{margin-left:50px; opacity:.5;}
35. 70%{margin-left:50px; opacity:1;}
36. 80%{margin-left:50px; opacity:.5;}
37. 90%{margin-left:50px; opacity:1;}
38. 100%{margin-left:50px; opacity:1;}
39. }
40.  
41. .txt-3{
42. position:absolute;
43. bottom:10px;
44. right:0px;
45. margin-left:-60px;
46. -webkit-animation:txt-3-move 2s ease-out 2s;
47. -moz-animation:txt-3-move 2s ease-out 2s;
48. animation:txt-3-move 2s ease-out 2s;
49. }
50. @-webkit-keyframes txt-3-move{
51. 0%{margin-right:0px; opacity:0;}
52. 50%{margin-right:30px; opacity:1; -webkit-transform:skew(-15deg);}
53. 70%{margin-right:35px; opacity:1;}
54. 100%{margin-right:60px; opacity:0; -webkit-transform:skew(-30deg);}
55. }