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: 后续继续更新!!

目录
相关文章
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
644 143
|
9月前
|
自然语言处理 前端开发 JavaScript
用 通义灵码 一键生成“水波纹按钮”,连 CSS 动画都不用自己写了!
通义灵码是一款智能编程辅助工具,它可以根据自然语言指令自动生成高质量的代码。例如,只需输入“生成一个按钮,点击时带水波纹动画,模拟 Material Ripple 效果”,它就能生成具备完整交互逻辑、CSS 动画和良好性能的按钮组件。不仅如此,它还支持拓展功能,如长按触发提示、添加图标等,并能自动优化样式适配不同场景。通过通义灵码,开发者可以大幅提升效率,专注于创意实现,而不必纠结于繁琐的代码细节。
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
420 3
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
469 154
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
284 34
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
482 63
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
431 58
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
250 22

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    420
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    330
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    307
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    205
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    422
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    608
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    780
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    214
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    623
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    383