作者:
WangMin
格言:努力做好自己喜歡的每一件事
以下為各種動畫類型包含的不同動畫效果類,僅供參考。具體可查看animate.css 官網。
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 元素從下到上,平滑消失
以上僅是個人見解,若有不足之處歡迎在下方評論指出,那就先分享到這里!! 😄 后續繼續更新!!