美妙的css3动画库 animate.css

平常使用css3 animation需要自己写动画效果，自己写呢效果僵硬，动作单一，就像机器人的一举一动。于是乎一个偶然的机会发现了美妙的css3动画库：animate.css，动画效果令人窒息！

官方地址：

https://daneden.github.io/animate.css/

一、动画效果大致分为以下几类：

Attention（晃动效果）

bounce（弹性缓冲效果）

fade（透明度变化效果）

flip（翻转效果）

rotate（旋转效果）

slide（滑动效果）

zoom（变焦效果）

special（特殊效果）

二、引用

引用方式就不多说了：

1.  下载下来link引入

2.  cdn也可以，eg： https://www.bootcdn.cn/animate.css/

3.  npm安装：$ npm install animate.css

三、使用

每一个动画名对应一个相同的类名，所以可以在元素中直接引用：

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

<div class="rollIn animated"></div>

  animated，类似全局效果，是对于动画的基础展现方式，看代码：（这里要注意：库名是animate.css，而这里的类名是animated，是的，你没有看错，我也没写错，多了一个“d”字母，嘿嘿）

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

当然，也可以单独引用并设置属性：

div {
    animation-name: rollIn;
    animation-delay: 0.5s;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}

animate.css使用比较简单，有动画需要拿来使用即可。