animate.css 动画种类(详细)

简介: animate.css 动画库

作者:WangMin
格言:努力做好自己喜欢的每一件事

1.jpg

以下为各种动画类型包含的不同动画效果类,仅供参考。具体可查看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         元素从下到上,平滑消失

以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
16天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
|
21天前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
21 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
41 0
JS配合CSS3实现动画和拖动小星星小Demo
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
27 0
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
58 5
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
3月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
|
3月前
|
前端开发 JavaScript
还在为酷炫css动画背景头疼吗?1分钟解决
还在为酷炫css动画背景头疼吗?1分钟解决