animate.css動(dòng)畫種類

animate.css 一個(gè)非常好用的css動(dòng)畫庫(kù) Github地址

包括了一下多種動(dòng)畫

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

11. bounceIn           重復(fù)放大縮小
12. bounceInDown       從上到下出現(xiàn),彈簧
13. bounceInLeft       從左到右出現(xiàn),彈簧
14. bounceInRight      從右到左出現(xiàn),彈簧
15. bounceInUp         從下到上出現(xiàn),彈簧
16. bounceOut          從常規(guī)到小消失,彈簧
17. bounceOutDown      從常規(guī)到小,從下方消失,彈簧
18. bounceOutLeft      從常規(guī)到小,從左方消失,彈簧
19. bounceOutRight     從常規(guī)到小,從右方消失,彈簧
20. bounceOutUp        從常規(guī)到小,從上方消失,彈簧

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

39. flip               中心Y軸旋轉(zhuǎn),放大,縮小
40. flipInX            元素中心X軸旋轉(zhuǎn)
41. flipInY            元素中心Y軸旋轉(zhuǎn)
42. flipOutX           中心X軸旋轉(zhuǎn),消失
43. flipOutY           中心Y軸旋轉(zhuǎn),消失

44. lightSpeedIn       從右到左,平行四邊形,左上角突出進(jìn)入
45. lightSpeedOut      從左到右,平行四邊形,左上角突出進(jìn)入

46. rotateIn           元素中心順時(shí)針旋轉(zhuǎn)進(jìn)入
47. rotateInDownLeft   元素左外長(zhǎng)半徑順時(shí)針旋轉(zhuǎn)進(jìn)入
48. rotateInDownRight  元素右外長(zhǎng)半徑逆時(shí)針旋轉(zhuǎn)進(jìn)入
49. rotateInUpLeft     元素左外長(zhǎng)半徑逆時(shí)針旋轉(zhuǎn)進(jìn)入     
50. rotateInUpRight    元素右外長(zhǎng)半徑順時(shí)針旋轉(zhuǎn)進(jìn)入
51. rotateOut          元素中心順時(shí)針旋轉(zhuǎn)消失
52. rotateOutDownLeft  元素左外長(zhǎng)半徑順時(shí)針旋轉(zhuǎn)消失
53. rotateOutDownRight 元素右外長(zhǎng)半徑逆時(shí)針旋轉(zhuǎn)消失
54. rotateOutUpLeft    元素左外長(zhǎng)半徑逆時(shí)針旋轉(zhuǎn)消失
55. rotateOutUpRight   元素右外長(zhǎng)半徑順時(shí)針旋轉(zhuǎn)消失

56. hinge              從右上到坐下,順時(shí)針旋轉(zhuǎn),從上到下消失

57. rollIn             元素左外長(zhǎng)半徑順時(shí)針旋轉(zhuǎn),平滑進(jìn)入
58. rollOut            元素右外長(zhǎng)半徑順時(shí)針旋轉(zhuǎn),平滑進(jìn)入

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

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

? ?
? ?
? ?

親情鏈接:
個(gè)人網(wǎng)站

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容