animate.css 一个非常好用的css动画库 Github地址

包括了一下多种动画

1.	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. vue中使用transition和animate.css动画效果

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

  2. animate CSS动画程序接口（仅Chrome可用）

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

  3. animate.css 动画的使用

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

  4. animate.css动画

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

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

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

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

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

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

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

  8. Animate.css介绍

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

  9. WOW.js 和 animate.css 使用

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

随机推荐

  1. win10中jdk1.8环境配置完，重启之后配置失效

    1.win10操作系统下重启电脑java环境变量失效 解决方式: 右击开始按钮,选择管理员方式的windows powershell,如下图: 在窗口中输入javac,一切正常,即使重启都不会有问题啦 ...

  2. 转：HTTP Get请求URL最大长度

    转自:http://blog.csdn.net/M_ChangGong/article/details/5764711 各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过 ...

  3. 深度学习 循环神经网络 LSTM 示例

    最近在网上找到了一个使用LSTM 网络解决  世界银行中各国 GDP预测的一个问题,感觉比较实用,毕竟这是找到的唯一一个可以正确运行的程序. #encoding:UTF-8 import pandas ...

  4. opencv之批量转换灰度图并保存

    当图片名字有数字规律时,批量处理方式. ①srcImage 图片名字有规律 ②将srcImage文件下的图片,转换为灰度图并保存入grayImage文件夹. ③ #include <iostre ...

  5. vm虚拟机怎么访问本地硬盘

    第一步:点击VMware菜单“虚拟→设置”,在配置窗口的“选项”标签页内点击“共享文件夹”,在右侧点击“添加”按钮添加要共享的文件夹. 先确认虚拟机是关闭状态(susppend时无法修改属性)再修改虚 ...

  6. SonarQube使用教程

    SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误,本文将会介绍一下这个工具的安装.配置以及使用. 一.SonarQube的安装使用: 下载地址:http://ww ...

  7. DNS中NS和SOA区别

    ns 授權很簡單… 假設你註冊的 domain 叫 abc.com ,而你有 ns1 與 ns2 兩台 server . 那,你必需從 .com 的權威伺服器授權給你,其設定或類似如此: $ORIGI ...

  8. [NOI2018]归程(可持久化并查集,Kruskal重构树)

    解法一: 1.首先想到离线做法:将边和询问从大到小排序,并查集维护连通块以及每个连通块中所有点到1号点的最短距离.$O(n\log n)$ 配合暴力等可以拿到75分. 2.很容易想到在线做法,使用可持 ...

  9. 负载均衡-haproxy安装配置

    HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要会话保持 ...

  10. 用PHP收发邮件

    注:在WinForm下怎么试都不好使,最后没办法换成了PHP下,一试就好使了. 这里用到了phpmailer组件,网上有下. 转:phpnow支持ssl的方法 原文出处:http://blog.163 ...