作者: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 元素从下到上,平滑消失

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

animate.css 动画种类(详细)的更多相关文章

  1. animate.css动画种类

    animate.css 一个非常好用的css动画库 Github地址 包括了一下多种动画 1. bounce 弹跳 2. flash 闪烁 3. pulse 放大,缩小 4. rubberBand 放 ...

  2. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  3. animate CSS动画程序接口(仅Chrome可用)

    jQuery中很早就提供了animate方法,使用它可以很方便地实现一些简单动画效果.后来CSS3中也提供了animation用于动画效果制作,但CSS本身的可操作性太差,所以用起来并不方便.现在最新 ...

  4. animate.css 动画的使用

    $('#animatedClose').removeClass().addClass('fadeInDownBig animated').one('webkitAnimationEnd mozAnim ...

  5. animate.css动画

    添加类名的时间不要只添加动画的类名,也要加上animated,使用的时间可以把自己需要的效果复制出来

  6. 【学习参考】Animate.css动画演示

    学习参考地址: http://www.dowebok.com/demo/2014/98/

  7. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  8. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  9. Animate.css介绍

    Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...

  10. WOW.js 和 animate.css 使用

    animate.css 动画样式,用户也可以非常容易修改设置喜欢的动画库. Wow.js 允许用户滚动页面的时候展示 CSS 动画.配合animate.css ,做出很棒的效果,它支持 animate ...

随机推荐

  1. CocosCreator + Vscode + Ts 代码注释生成文档,利用typedoc

    需求: 脚本的代码注释,生成为文档 基本搭建环境: (cocoscreator 2.4.x + vscode + ts) .(nodejs + npm) 步骤: 1.安装typedoc: npm in ...

  2. Argument data type text is invalid for argument 1 of replace function

    今天给webapi添加了搜索,结果数据库显示了这个错误, Argument data type text is invalid for argument 1 of replace function 查 ...

  3. Unity UGUI的PointerEventData的介绍及使用

    Unity UGUI的PointerEventData的介绍及使用 1. 什么是PointerEventData? PointerEventData是Unity中UGUI系统中的一个重要组件,用于处理 ...

  4. go项目实现在配置文件实现配置项统一管理

    转载请注明出处: go项目中实现配置项统一管理,实现逻辑:将 配置项整理为一个json的数据结构,并保存到go.conf文件中,然后在go项目启动main方法中加载 go.conf 文件,读取go.c ...

  5. Django错误:ERRORS: ?: (staticfiles.E001) The STATICFILES_DIRS setting is not a tuple or list. HINT: Perhaps you forgot a trailing comma?

    报错的原因是因为我们的STATICFILES_DIRS赋值时,形式不对,其应该赋数组对象,具体如下: 找到settings.py文件, 把 STATICFILES_DIRS=(os.path.join ...

  6. 详细讲解原生js拖拽

    场景描述 今天遇见一个问题,那就是产品希望在弹出来的窗口. 可以移动这个弹窗的位置 增加用户体验,我们直接使用的element-ui中的 Dialog 对话框 我们现在需要拖拽标题,移动元素位置 元素 ...

  7. 在.NET Framework中使用RocketMQ(阿里云版)实战【第一章】

    章节 第一章:https://www.cnblogs.com/kimiliucn/p/17662052.html 第二章: 作者:西瓜程序猿 主页传送门:https://www.cnblogs.com ...

  8. 前瞻|Java 21 新特性 String Templates(字符串模版)

    在日常写Java的时候,对于字符串的操作是非常普遍的,其中最常见的就是对字符串的组织.也因为这个操作非常普遍,所以诞生了很多方案,总下来大概有这么几种: 使用+拼接 使用StringBuffer和Sp ...

  9. vue3 甘特图(一):选择与初始化甘特图

    vue3 甘特图(一) 1.功能使用背景: 甘特图是一种项目管理工具,以图形直观的方式显示项目的时间轴和任务计划,为了可扩展和定制相关任务的开发,故此选择dhtmlx-gantt 2.vue3 初始化 ...

  10. 上位机使用JS SerialPort进行串口通信, 包含开发环境搭建和完整示例代码

    在嵌入式开发中,我们经常需要使用上位机(PC)与一些电路模块进行通信, 用于获取一些传感器的数据,或者发送命令控制相应的电路模块.NodeJS目前支持使用SerialPort模块进行串口通信,本文主要 ...