CSS3动画插件：Animate.css

官网：https://daneden.github.io/animate.css/
GitHub：https://github.com/daneden/animate.css

CSS动画 可以取代js动画 在移动端会更加流畅！

下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！
首先我们需要创建一个@keyframes规则

@keyframes name{
  from{width:1px}
  to{width:100px}
}
//或者使用百分比
@keyframes name{
  0%{width:1px}
  100{width:100px}
}

创建好之后，我们需要在css选择器里引用我们写的规则，

.box1{
  width: 0px;
  height: 100px;
  background-color: #00FF7F;
  /* 引用 / 捆绑*/
  animation: first 2s;
}
@keyframes first{
  0%{width:1px}
  100{width:100px}
}

效果图：

当然我们除了改变宽度width 还可以改变其他的属性：height、定位、移动、旋转、缩放等你所能想到的css属性

---

css3动画属性非常多，我感觉常用的是animation的简写形式和一个动画周期需要花费的时间animation-duration;

以下也是一个小的实例：

html,body {
  height: 100%;
}

.horse {
  width: 128px;
  height: 128px;
  background: url(images/Horse_256px_1096282_easyicon.net.png) no-repeat;
  background-size: 100% 100%;

  transform: scaleX(-1);
  animation: bounce 0.1s infinite;
}

@keyframes runhorse {
  0% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  25% {
    transform: translate(calc(100vw - 128px), 10px) scaleY(-1);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  50% {
    transform: translate(calc(100vw - 129px), calc(100vh - 200px));
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  75% {
    transform: translate(0, calc(100vh - 128px)) scaleX(-1);
  }
  100% {
    transform: translate(10px, 10px) translate3d(0, -4px, 0);
  }
}

body:hover .horse {
  animation: runhorse 2s linear infinite;
}

效果图：

没考虑小马的头的方向，只是写了旋转的效果，很多css属性都可以用到动画效果里。可以参考~

推荐使用animate.css
①下载animate.css

②或者直接进入animate.css 随后右键另存为即可使用

③直接在页面顶部head标签通过link引入

基本模板如下：

  
  
  
  
  


  

    Anyw3c
    

效果如下：

---

接下来，就是对animate.css运动的一个小总结 按官网顺序

①Attention seekers

• bounce 轻轻跳跃一下（弹跳；弹起，反跳；弹回）
• flash 闪烁两次（使闪光；反射）
• pulse 慢慢放大，然后回缩（跳动，脉跳）
• shake 左右轻晃几次
• swing 以中间顶部为中心小幅度晃动
• tada 很调皮的一个小晃动，ps：只能这么描述了
• wobble 大幅晃动，地动山摇

②Bouncing Entrances

• bounceIn 正中央，从无到有，轻轻抖动几次
• bounceInDown 从右侧进来，无到有，轻轻抖动几次
• bounceInLeft 雷同，但是一定要注意大小写“专业点叫驼峰式”
• bounceInRighr
• bounceInUp
• bouncing Exits
• bounceOut 正中央，从有到无，轻轻抖动几次消失
• bounceOutDown
• bounceOutLeft
• bounceOutRighr
• bounceOutUp

③Fading Entrances

• fadeIn 跟上面bounceIn还是有些区别的，毕竟不抖
• fadeInDown 逐渐从上面down下来
• fadeInDownBig逐渐从上面down下来，但是跟上面那位有稍微区别，加了big后起始位置是从设备外进来的
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightNig
• fadeInUp
• fadeInUpBig 用up测试下big吧
• fading Exits
• fadeOut 恰与fadeIn相反
• fadeOutDown 逐渐从上面down下去消失，你确定不玩玩big了？
• fadeOutDownBig逐渐从上面down下去，但是跟上面那位有稍微区别，加了big后终点位置是从设备外
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightNig
• fadeOutUp
• fadeOutUpBig  /以下这些都是常用的哦！/

④Flippers

• flip 一个夸张的放大饭庄缩小效果
• flipInX 沿中心水平轴小幅度反转出来
• FlipInY 沿中心竖直轴小幅度反转出来
• flipOutX 沿中心水平轴小幅度反转消失
• FlipOutY 沿中心竖直轴小幅度反转消失

⑤Lightspeed

• lightSpeedIn 字面意思就是光速出来喽，记得调快速度哦，什么，怎么调速我没说么？好吧，先留个坑，待会儿补。
• lightSpeedOut 光速消失

⑥Rotating Entrances

• rotateIn 准确说是以正中心点180度旋转渐显
• rotateInDownLeft 没错，就是以左上角为中心点转下来
• rotateInDownRight 就是以右上角为中心点转下来
• rotateInUpLeft 就是以左上角为中心点转上去
• rotateInUpRight 就是以右上角为中心点转上去
• rotating Exits
• rotateOut 准确说是以正中心点180度旋转渐隐
• rotateOut DownLeft
• rotateOut DownRight
• rotateOut UpLeft
• rotateOut UpRight

⑦Sliding Entrances

• slideInUp 这个slide感觉就有点鸡肋了，有了上边的Lightspeed、fadeIn，就会看出这个的弊端，动作幅度太小
• slideInDown
• slideInLeft
• slideInRight
• sliding Exits
• slideOutUp 表现依旧不好
• slideOutDown
• slideOutLeft
• slideOutRight

⑧Zoom Entrances

• zoomIn 牢记哦，正中央出来的，做效果是最棒了
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoom Exits
• zoomOut 牢记哦，正中央消失的，配合上面的zoomIn做效果是最棒了
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp

⑨Specials

• hinge 悬挂，颤抖，掉下去
• rollIn 从左侧旋转进入
• rollOut 向右侧旋转消失   到此呢，整个animate.css里的所有动作效果规整完毕。回上边去填坑！！

若想用到延时加载和控制运动过渡时间，就必须要用到jquery了，所以我们先去找个jq引入到页面底部

Demo如下：

  
  
  
  
  


test

使用jq来重定义css样式，这种方法其实违背了animate简化运动代码的初衷！