CSS（3）-动画

动画

    //平移
     -webkit-transform: translate(100px,100px);
     -moz-transform: translate(100px,100px);
     -ms-transform: translate(100px,100px);
     -o-transform: translate(100px,100px);
     transform: translate(100px,100px);

    //缩放
    -webkit-transform: scale(1.1,1.5);
    -moz-transform: scale(1.1,1.5);
    -ms-transform: scale(1.1,1.5);
    -o-transform: scale(1.1,1.5);
    transform: scale(1.1,1.5);

    //扭曲
    -webkit-transform: skew(10deg, 10deg);
    -moz-transform: skew(10deg, 10deg);
    -ms-transform: skew(10deg, 10deg);
    -o-transform: skew(10deg, 10deg);
    transform: skew(10deg, 10deg);

    //旋转
    -webkit-transform: rotate3d(1,-1,0,60deg);
    -moz-transform: rotate3d(1,-1,0,60deg);
    -ms-transform: rotate3d(1,-1,0,60deg);
    -o-transform: rotate3d(1,-1,0,60deg);
    transform: rotate3d(1,-1,0,60deg);

    //rotateX，rotateY
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    transform: rotate(7deg);

    //动画过渡 all 0.5s ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier 1s
    //所有变化，过渡事件，过渡函数，延迟时间
    transition: width 1s,background 2s;

    //使用关键帧制作动画，绕Y轴旋转的效果
    @keyframes spin {
      from{
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
      }
      to{
        -webkit-transform: rotateY(-360deg);
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        -o-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
      }
    }
    @keyframes spin2 {
      0% {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
      }
      50%
      {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
      100%
      {
        -webkit-transform: rotateY(-360deg);
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        -o-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
      }
    }

    //通过js控制running，paused改变动画状态。
    animation-play-state: running;

    //兼容性的动画，正向运动完，再反向运动。
    -webkit-animation: myfirst 5s infinite alternate;
    -o-animation:myfirst 5s infinite alternate;
    -moz-animation: myfirst 5s infinite alternate;
    -ms-animation: myfirst 5s infinite alternate;
    animation:myfirst 5s infinite alternate;

    @keyframes myfirst {
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
@-webkit-keyframes myfirst{
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
@-moz-keyframes myfirst{
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
@-ms-keyframes myfirst{
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
@-o-keyframes  myfirst{
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}

简单的鼠标动画库hover.css : http://ianlunn.github.io/Hover/
复杂的鼠标悬浮效果iHover.css: http://gudh.github.io/ihover/dist/index.html
更复杂的事件触发move.js:效果展示网站：http://visionmedia.github.io/move.js/
github下载地址：https://github.com/visionmedia/move.js