css 动画（二） transition 过渡 & animation 动画

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

• translate：平移；是transform的一个属性；
• transform：变形；是一个静态属性，可以改变元素的形状或位置，做出 2d 或 3d 效果；
• transition：过渡，转变；使 css 属性值在一段时间内平滑的变化，需要有触发条件（如 hover 等），是 animation 的简化版；
• animation：动画；可以设置多帧效果，然后把它们组合变换，按动画效果展示出来；

transition

　　过渡，右有四个子属性：

• transition-property：过渡属性，默认为 all；
• transition-duration：过渡效果花费的时间，默认值是0，以秒或毫秒计，不能为负值；
• transition-timing-function：定义过渡效果的速度，默认值 ease(开始和结束慢，中间快)，可以设置 linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；
• transition-delay：定义过渡延时时间；默认值为0（直接开始），以秒或毫秒计，可为负值；
• transition的四个子属性可以缩写，用空格隔开；其中 duration（过渡时间）和 delay（延时时间）两个值都是时间，当两个值都存在时，第一个是 duration（过渡时间），第二个是 delay（延时时间）；如果只存在1个时间，那就是 duration（过渡时间），delay（延时时间）默认为0；
• transition可以同时设置多个属性的过渡效果，用逗号隔开；
• transition需要有触发条件，animation 则不需要；

　　建议看 大神的这篇博文，讲的比较详细，里面还有关于 API 的东西；

　　

　　想整个 hover 效果的，弄了好久，又是 iframe（在 jsrun.cn 网站上做出效果，然后分享，自动生成 iframe 链接），又是 js 的，都没弄出来，好像是没有 js 权限，懒得整了。

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      margin: 100px;
      height: 300px;
      border: 10px solid #f0f;
      background: #0ff;
      position: relative;
      cursor: pointer;
    }

    .test {
      width: 100px;
      height: 100px;
      background: #f60;
      position: absolute;
      left: 30px;
      top: 30px;
      transition: width 1s ease-in-out 2s,
        height 2s ease-in,
        background 3s linear,
        left .5s ease-out,
        top 1.5s ease-in;
    }

    .wrapper:hover .test {
      width: 150px;
      height: 50px;
      background: #ff0;
      left: 200px;
      top: 150px;
    }
  </style>
  <div class="wrapper">
    <div class="test"></div>
  </div>

animation

　　动画，一种样式到另一种样式的动画效果，可以改变任意多的次数任意多的样式，用百分比来规定发生的时间，或关键词"from"和"to"，等同于"0%"和"100%"；

1. 先用 @keyframes 定义动画的名称，然后根据时间轴来写不同的动画效果；
2. 在需要做动画效果的元素身上设置 animation 属性，并绑定动画名称，然后设置动画持续时间、时间函数、延时、播放次数、播放方向、播放状态、填充模式等；

@keyframes:

• @keyframes，声明动画名称；时间轴的百分比顺序可以随便排列，最后浏览器都是从0%到100%按顺序解析，0%不可以省略百分号；
• 设置小于0%或者大于100%的百分比是无效的；
• 如果0%或100%没有写动画效果的属性，那么将应用元素默认的属性值；
• 如果多个 @keyframes 的名称相同，那么只有最后一个有效，如果最后一个 @keyframes 没有写任何属性，那么动画效果就是没有的（不管前面相同名称的 @keyframes）

animation-duration

　　动画执行完成所需时间，默认为0（没有动画效果），不能为负值，否则将没有动画效果；

animation-timing-function

　　类似与transition的时间函数，默认值ease(开始和结束慢，中间快)，可以设置linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；

animation-delay

　　定义延时多长时间后开始播放动画；可以设置负值（从提前多少秒的位置开始播放动画）；

animation-interation-count

　　循环次数，默认值是1，可以设置整数或小数，不能是0以及负值，也可以设置关键词"infinite"（无限次数）；

animation-direction

　　默认值 normal（正向），可设置 reverse（反向）、alternate（在奇数次正向，偶数次反向；也就是说动画顺序是0%---100%---0%---100%---...）、alternate-reverse（在奇数次反向，偶数次正向，也就是说动画顺序是100%---0%---100%---0%---...）；

　　safari 浏览器不支持 alternate 和 alternate-revers 属性；

animation-fill-mode

　　定义动画开始帧和结束帧的动作；默认值是 none（动画结束后，回归到初始状态，不是0%，是元素本身属性）；

　　可设置 forwards（元素停留在动画结束的状态，这个值并不一定是100%的位置，因为可能是反向播放，也可能播放次数是小数）；

　　可设置 backwards（元素停留在动画开始的状态，这个值不一定是0%的位置，因为延迟开始的时间可能是负值）；

　　可设置 both，意思是同时具有 forwards 和 backwards 的效果；

animation-play-state

　　设置动画运行（running）或者暂停（paused）;

　　建议看 大神的这篇博文，讲的比较详细，里面还有关于API的东西；

　　六面体旋转：

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    .wrapper {
      width: 600px;
      height: 600px;
      margin: 0 auto;
    }

    .demo-container {
      position: relative;
      width: 600px;
      height: 600px;
      perspective: 1800px;
      /*定义视距*/
    }

    @keyframes bigMove {
      0% {
        transform: rotateX(-25deg)rotateY(-45deg);
      }

      20% {
        transform: rotateX(-25deg)rotateY(135deg);
      }

      100% {
        transform: rotateX(-25deg)rotateY(135deg);
      }
    }

    @keyframes smallMove {
      0% {
        transform: rotateX(-25deg)rotateY(-45deg);
      }

      20% {
        transform: rotateX(-25deg)rotateY(-405deg);
      }

      100% {
        transform: rotateX(-25deg)rotateY(-405deg);
      }
    }

    .box {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
      transform: rotateX(-25deg)rotateY(-45deg);
      transform-style: preserve-3d;
      animation: bigMove 5s infinite ease-in-out 2s;
    }

    .box li {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 5px #98b5e0;
      text-align: center;
      font: 28px/300px "microsoft yahei";
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      background: radial-gradient(circle, rgba(165, 193, 235, .5) 0%, rgba(134, 167, 218, .5) 50%);
    }

    .box .front {
      transform: translateZ(150px);
    }

    .box .back {
      transform: translateZ(-150px)rotateY(180deg);
    }

    .box .left {
      transform: translateX(-150px)rotateY(-90deg);
    }

    .box .right {
      transform: translateX(150px)rotateY(90deg);
    }

    .box .top {
      transform: translateY(-150px)rotateX(90deg);
    }

    .box .bottom {
      transform: translateY(150px)rotateX(-90deg);
    }

    /*inner*/
    .inner {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      transform-style: preserve-3d;
      transform: rotateX(-25deg)rotateY(-45deg);
      animation: smallMove 5s infinite ease-in-out 2s;
    }

    .inner li {
      width: 100px;
      height: 100px;
      box-shadow: 0 0 2px #0b65ea;
      text-align: center;
      font: 28px/100px "microsoft yahei";
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      background: radial-gradient(circle, rgba(84, 153, 218, .5) 0%, rgba(73, 130, 215, .5) 50%);
    }

    .inner .front {
      transform: translateZ(50px);
    }

    .inner .back {
      transform: translateZ(-50px)rotateY(180deg);
    }

    .inner .left {
      transform: translateX(-50px)rotateY(-90deg);
    }

    .inner .right {
      transform: translateX(50px)rotateY(90deg);
    }

    .inner .top {
      transform: translateY(-50px)rotateX(90deg);
    }

    .inner .bottom {
      transform: translateY(50px)rotateX(-90deg);
    }
  </style>
  <div class="wrapper">
    <div class="demo-container">
      <ul class="box">
        <li class="front"></li>
        <li class="back"></li>
        <li class="left"></li>
        <li class="right"></li>
        <li class="top"></li>
        <li class="bottom"></li>
      </ul>
      <ul class="inner">
        <li class="front"></li>
        <li class="back"></li>
        <li class="left"></li>
        <li class="right"></li>
        <li class="top"></li>
        <li class="bottom"></li>
      </ul>
    </div>
  </div>

　　球旋转：

　　

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    body {
      background: #000;
    }

    .wrapper {
      width: 600px;
      height: 600px;
      margin: 0 auto;
      perspective: 1800px;
    }

    .demo-container {
      position: relative;
      width: 600px;
      height: 600px;
      overflow: hidden;
    }

    @keyframes boxXuanzhuan {
      0% {
        transform: rotateX(50deg)rotateZ(170deg)rotateY(50deg);
      }

      30% {
        transform: rotateY(50deg)rotateX(170deg)rotateZ(30deg);
      }

      60% {
        transform: rotateZ(50deg)rotateY(170deg)rotateX(95deg);
      }

      100% {
        transform: rotateX(50deg)rotateZ(170deg)rotateY(66deg);
      }
    }

    .box {
      width: 600px;
      height: 600px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -300px;
      /*transition: all 3s;*/
      /*transform: rotateX(-134deg)rotateY(64deg);*/
      transform-style: preserve-3d;
      animation: boxXuanzhuan 30s infinite ease alternate;
    }

    @keyframes liXuanZhuan {
      0% {
        background: #acf91a;
        color: #00B700;
        border-radius: 50%;
        width: 50px;
        height: 30px;
        box-shadow: 0 0 10px #adff2f;
      }

      30% {
        background: #f9641a;
        color: #f71af9;
        border-radius: 20%;
        width: 60px;
        height: 50px;
        box-shadow: 0 0 10px #818217;
      }

      70% {
        background: #6932bf;
        color: #FFFFFF;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        box-shadow: 0 0 10px #adff2f;
      }

      100% {
        background: #acf91a;
        color: #00B700;
        border-radius: 10%;
        width: 50px;
        height: 30px;
        box-shadow: 0 0 10px #adff2f;
      }
    }

    .box li {
      background: #00FF99;
      position: absolute;
      width: 60px;
      height: 60px;
      left: 50%;
      top: 50%;
      margin-left: -30px;
      margin-top: -30px;
      font: 22px/60px "microsoft yahei";
      color: #F08787;
      border-radius: 50%;
      text-align: center;
      animation: liXuanZhuan 20s infinite ease alternate;
    }

    .item1 {
      transform: translateZ(250px);
    }

    .item2 {
      transform: translateZ(-250px);
    }

    .item3 {
      transform: rotateY(90deg)translateZ(250px);
    }

    .item4 {
      transform: rotateY(-90deg)translateZ(250px);
    }

    .item5 {
      transform: rotateY(45deg)translateZ(-250px);
    }

    .item6 {
      transform: rotateY(-45deg)translateZ(-250px);
    }

    .item7 {
      transform: rotateY(45deg)translateZ(250px);
    }

    .item8 {
      transform: rotateY(-45deg)translateZ(250px);
    }

    .item9 {
      transform: rotateY(-45deg)rotateX(45deg)translateZ(250px);
    }

    .item10 {
      transform: rotateY(-135deg)rotateX(45deg)translateZ(250px);
    }

    .item11 {
      transform: rotateY(45deg)rotateX(45deg)translateZ(250px);
    }

    .item12 {
      transform: rotateY(135deg)rotateX(45deg)translateZ(250px);
    }

    .item13 {
      transform: rotateY(-45deg)rotateX(-45deg)translateZ(250px);
    }

    .item14 {
      transform: rotateY(-135deg)rotateX(-45deg)translateZ(250px);
    }

    .item15 {
      transform: rotateY(45deg)rotateX(-45deg)translateZ(250px);
    }

    .item16 {
      transform: rotateY(135deg)rotateX(-45deg)translateZ(250px);
    }

    .item17 {
      transform: rotateX(90deg)translateZ(250px);
    }

    .item18 {
      transform: rotateX(-90deg)translateZ(250px);
    }
  </style>
  <div class="wrapper">
    <div class="demo-container">
      <ul class="box">
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
        <li class="item8"></li>
        <li class="item9"></li>
        <li class="item10"></li>
        <li class="item11"></li>
        <li class="item12"></li>
        <li class="item13"></li>
        <li class="item14"></li>
        <li class="item15"></li>
        <li class="item16"></li>
        <li class="item17"></li>
        <li class="item18"></li>
      </ul>
    </div>
  </div>