欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Animate.css 使用教程（一个强大的 CSS3 动画库）

程序员文章站 2022-03-16 18:58:28
...

前言

animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。

基本用法

引入CSS文件

这个对你来说应该再容易不过了，我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件，如下：

 
  1. <head>
  2. <link rel="stylesheet" href="animate.min.css">
  3. </head>

辅助类

给你想添加动画效果的元素添加一个 animated 类（必需）。如果需要动画循环运动，你还需要给这个元素追加 infinite 类，又或者自己另外定义一个类似于 infinite 的类。

效果添加

接下来就是最后一步了，最激动人心，也是最重要的一步，为元素添加你想要的效果所对应的类名就大功告成了。下面我就列出来，你大可随便挑，随便选。

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
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

示例

 
  1. <h1 class="animated infinite bounce">Example</h1>

你可以通过这里来体验 Animate.css 的强大效果：https://daneden.github.io/animate.css/

进阶用法

正如上面所说的，把 animate.css 用到你的网站项目中，你只需要简单地把下面的这一行代码扔到你页面的head 标签里就可以了，接着就是给目标元素添加一个 animated 类。就这样！你就可以得到一个酷炫的动画效果了。

 
  1. <head>
  2. <link rel="stylesheet" href="animate.min.css">
  3. </head>

jQuery 基本用法

你还可以通过 jQuery 或者自己定义的 CSS 规则来给目标元素一次性添加对应效果的 class 类。

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

你还可以监听动画事件是否已经执行完毕，并执行回调函数。

 
  1. $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

扩展 jQuery

你还可以通过扩展 jQuery 来实现自己想要效果。

 
  1. $.fn.extend({
  2. animateCss: function (animationName) {
  3. var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  4. $(this).addClass('animated ' + animationName).one(animationEnd, function() {
  5. $(this).removeClass('animated ' + animationName);
  6. });
  7. }
  8. });

可以像下面这样使用

 
  1. $('#yourElement').animateCss('bounce');

动画延时

你还可以改变动画运动时间，添加动画延迟，或者直接修改默认配置的数字。

 
  1. #yourElement {
  2. -vendor-animation-duration: 3s;
  3. -vendor-animation-delay: 2s;
  4. -vendor-animation-iteration-count: infinite;
  5. }

使用的时候记得把CSS样式中的“vendor”用相应的前缀替换掉（webkit, moz, etc）。

相关标签： Animate.css Animate.css教程

上一篇： css3 animate 和关键帧 @-webkit-keyframes

下一篇： vue中的动画

推荐阅读