animate.css動畫種類

animate.css 一個很是好用的css動畫庫 Github地址

包括了一下多種動畫

1.  bounce             彈跳
2.  flash              閃爍
3.  pulse              放大，縮小
4.  rubberBand         放大，縮小，彈簧
5.  shake              左右晃動
6.  headShake          左右小幅晃動
7.  swing              左右扇形搖擺
8.  tada               放大，左右上下晃動，縮小
9.  wobble             左右小幅(圓點較遠)扇形搖擺
10. jello              左右左右上下晃動

11. bounceIn           重複放大縮小
12. bounceInDown       從上到下出現，彈簧
13. bounceInLeft       從左到右出現，彈簧
14. bounceInRight      從右到左出現，彈簧
15. bounceInUp         從下到上出現，彈簧
16. bounceOut          從常規到小消失，彈簧
17. bounceOutDown      從常規到小，從下方消失，彈簧
18. bounceOutLeft      從常規到小，從左方消失，彈簧
19. bounceOutRight     從常規到小，從右方消失，彈簧
20. bounceOutUp        從常規到小，從上方消失，彈簧

21. fadeIn             漸現
22. fadeInDown         漸現，從上到下
23. fadeInDownBig      漸現，從上到下，滑動距離較長
24. fadeInLeft         漸現，從左到右
25. fadeInLeftBig      漸現，從左到右，滑動距離較長
26. fadeInRight        漸現，從右到左
27. fadeInRightBig     漸現，從右到左，滑動距離較長
28. fadeInUp           漸現，從下到上
29. fadeInUpBig        漸現，從下到上，滑動距離較長
30. fadeOut            漸隱
31. fadeOutDown        漸隱，從上到下
32. fadeOutDownBig     漸隱，從上到下，滑動距離較長
33. fadeOutLeft        漸隱，從左到右
34. fadeOutLeftBig     漸隱，從左到右，滑動距離較長
35. fadeOutRight       漸隱，從右到左
36. fadeOutRightBig    漸隱，從右到左，滑動距離較長
37. fadeOutUp          漸隱，從下到上
38. fadeOutUpBig       漸隱，從下到上，滑動距離較長

39. flip               中心Y軸旋轉，放大，縮小
40. flipInX            元素中心X軸旋轉
41. flipInY            元素中心Y軸旋轉
42. flipOutX           中心X軸旋轉，消失
43. flipOutY           中心Y軸旋轉，消失

44. lightSpeedIn       從右到左，平行四邊形，左上角突出進入
45. lightSpeedOut      從左到右，平行四邊形，左上角突出進入

46. rotateIn           元素中心順時針旋轉進入
47. rotateInDownLeft   元素左外長半徑順時針旋轉進入
48. rotateInDownRight  元素右外長半徑逆時針旋轉進入
49. rotateInUpLeft     元素左外長半徑逆時針旋轉進入     
50. rotateInUpRight    元素右外長半徑順時針旋轉進入
51. rotateOut          元素中心順時針旋轉消失
52. rotateOutDownLeft  元素左外長半徑順時針旋轉消失
53. rotateOutDownRight 元素右外長半徑逆時針旋轉消失
54. rotateOutUpLeft    元素左外長半徑逆時針旋轉消失
55. rotateOutUpRight   元素右外長半徑順時針旋轉消失

56. hinge              從右上到坐下，順時針旋轉，從上到下消失

57. rollIn             元素左外長半徑順時針旋轉，平滑進入
58. rollOut            元素右外長半徑順時針旋轉，平滑進入

59. zoomIn             元素由小變大進入
60. zoomInDown         元素由小變大，從上方進入
61. zoomInLeft         元素由小變大，從左方進入
62. zoomInRight        元素由小變大，從右方進入
63. zoomInUp           元素由小變大，從下方進入
64. zoomOut            元素由大變小，消失
65. zoomOutDown        元素由大變小，從下方消失
66. zoomOutLeft        元素由大變小，從左方消失
67. zoomOutRight       元素由大變小，從右方消失
68. zoomOutUp          元素由大變小，從上方消失

69. slideInDown        元素從上到下，平滑進入
70. slideInLeft        元素從左到右，平滑進入
71. slideInRight       元素從右到左，平滑進入
72. slideInUp          元素從下到上，平滑進入
73. slideOutDown       元素從上到下，平滑消失
74. slideOutLeft       元素從右到左，平滑消失
75. slideOutRight      元素從左到右，平滑消失
76. slideOutUp         元素從下到上，平滑消失

   
   
   

友情連接:

技術博客        簡書主頁