纯css3动画库animate.css

2018年1月17日20:37:04 发表评论 29

css3还没有定制之前我们要做网页运动都是用flash或者说js来实现的,如今css3已经被大多数浏览器支持,所以说以后我们能用css写的就别用js写了,至于flash,貌似销声匿迹很久了,今天给大写带了一个css3动画库,里面有多达60多种常见的网页动画效果,大家也可以在animate官网或者作者的github上查看具体的说明,下面详细的介绍下这个库如何使用!

纯css3动画库animate.css

1. 引入animated.css文件

  1. // 放在</head>之前
  2. <link rel="stylesheet" href="animate.min.css">

2. 给需要动的元素加上类名

  1. <div class="animated bounceOutLeft"></div>

animated这个类名是必须要的,后面这个类名根据你自己喜欢的动画效果来选择,可以在animated官网看每个类名的动画效果。

3. 用jquery动态添加运动(可选)

我们可以用jquery动态添加动画效果,在某个元素发现某种事件后,在某个页面完成加载后,只需要给这个元素加上动画的类名就可以了。

  1. $('#yourElement').addClass('animated bounceOutLeft');

4.  animate所有的动画类名

bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp

总结:用css库虽说可以节省我们的开发效率,但是你如果想提高自己的技术的话,看这些库的源码也是一个非常不错的学习方法,这个animate.css库还是比较简单的,就是写这个重复的代码时要一个个测试其效果,还是外国友人有耐心呀,向大神学习!

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: