能为你解决7种业务需要的动画，不回顾下？

路灯下的光
680 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情

对于Css动画，相信我们或多或少都有些了解，其中最常见的属性就是animation，那么本文将从四种动画去慢慢了解一些好看的动画：淡入、翻转、倾斜、放大缩小。

淡入动画：有五种实现效果：全屏淡入、页面左右上下四个方向的淡入。由于动画都是从页面的全局出发实现页面的淡入，所以一般是样式声明在body以及目标元素的父元素。

@-webkit-keyframes fadeIn {
  0% {
        opacity: 0;
  }
  100% {
        opacity: 1;
  }
}

/* 淡入动画：从透明到非透明的状态转化 */
@keyframes fadeIn {
  0% {
        opacity: 0;
  }
  100% {
        opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

从上面的例子中，我们可以实现了全局的淡入动画，那么如果是从上下左右四个方向进行淡入的话，又是怎么样实现的？这就需要借助了translate3d这个属性的使用了，它有三个参数x（相对于x轴的平移长度，以数字或百分比形式）、y（相对于y轴的平移长度，以数字或百分比形式）、z（相对于z轴的平移长度，仅以数字形式）所以：

  • 页面向左淡入：透明度与上面保持一致，动画0%时设置transform: translate3d(-20%, 0, 0)再到动画100%时设置设置transform: none。也就是从左边超出边界-20%（x方向）再变回原来的动画。
  • 页面向右淡入：透明度与上面保持一致，动画0%时设置transform: translate3d(20%, 0, 0)再到动画100%时设置设置transform: none。也就是从右边超出边界20%（x方向）再变回原来的动画。
  • 页面向上淡入：透明度与上面保持一致，动画0%时设置transform: translate3d(0, 200px, 0)再到动画100%时设置设置transform: none。也就是从下边超出边界200px（y方向）再变回原来的动画。
  • 页面向下淡入：透明度与上面保持一致，动画0%时设置transform: translate3d(0, -200px, 0)再到动画100%时设置设置transform: none。也就是从下边超出边界-200px（y方向）再变回原来的动画。

效果如下所示：

fade1.gif 翻转动画：需要使用perspective这个属性是定义人与屏幕的距离，该属性的值定义了子代与Z平面的距离。注意地，它与translateZ的区别，translateZ是移动的是元素在z轴上的距离。一般来说，如果这两个属性都存在的时候，当translateZ设置为0px时，不管perspective这个属性值是怎么样，元素都不变；当translateZ为正值，perspective值固定时，元素越来越大。当translateZ为负值，perspective值固定时，元素越来越小。

perspective这个属性通俗来说就是使子元素呈现透视效果

  • 页面向x轴翻转：动画0%需要设置transform: perspective(100px) rotate3d(1, 0, 0, 10deg);，透视效果和rotate3d翻转效果，从x轴方向翻转10deg，动画100%时保留perspective(100px)。
  • 页面向y轴翻转：设置transform: perspective(1000px) rotate3d(0, 1, 0, 20deg);，透视效果和rotate3d翻转效果，从y轴方向翻转20deg。
@-webkit-keyframes flipInX {
      0% {
            -webkit-transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
            -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
            opacity: 0;
      }

      100% {
            -webkit-transform: perspective(100px);
            transform: perspective(100px);
      }
}

@keyframes flipInX {
      0% {
            -webkit-transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(100px) rotate3d(1, 0, 0, 10deg);
            -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
            opacity: 0;
      }

      100% {
            -webkit-transform: perspective(100px);
            transform: perspective(100px);
      }
}

.flipInX {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInX;
      animation-name: flipInX;
}

效果如下图所示：

flip1.gif

倾斜抖动动画：这时候就需要借助skew(x,y)、skewX(x)、skewY(y)。向某个方向（x轴或y轴）倾斜。

@-webkit-keyframes fadeDistortion {
  0% {
        opacity: 0;
        -webkit-transform: skewX(-8deg) skewY(-8deg);
        transform: skewX(-8deg) skewY(-8deg);
  }

  25% {
        -webkit-transform: skewX(6deg) skewY(6deg);
        transform: skewX(6deg) skewY(6deg);
  }

  50% {
        -webkit-transform: skewX(-4deg) skewY(-4deg);
        transform: skewX(-4deg) skewY(-4deg);
  }

  75% {
        -webkit-transform: skewX(2deg) skewY(2deg);
        transform: skewX(2deg) skewY(2deg);
  }

  100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
  }
}

@keyframes fadeDistortion {
  0% {
        opacity: 0;
        -webkit-transform: skewX(-8deg) skewY(-8deg);
        transform: skewX(-8deg) skewY(-8deg);
  }

  25% {
        -webkit-transform: skewX(6deg) skewY(6deg);
        transform: skewX(6deg) skewY(6deg);
  }

  50% {
        -webkit-transform: skewX(-4deg) skewY(-4deg);
        transform: skewX(-4deg) skewY(-4deg);
  }

  75% {
        -webkit-transform: skewX(2deg) skewY(2deg);
        transform: skewX(2deg) skewY(2deg);
  }

  100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
  }
}

.fadeDistortion {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation-name: fadeDistortion;
  animation-name: fadeDistortion;
}

效果如下图所示：

flip2.gif 放大缩小动画：借助scale3d(x,y,z)实现元素不同方向上的放大缩小。

@-webkit-keyframes zoomIn {
      0% {
            opacity: 0;
            -webkit-transform: scale3d(.8, .8, .8);
            transform: scale3d(.8, .8, .8);
      }

      100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
      }
}

@keyframes zoomIn {
      0% {
            opacity: 0;
            -webkit-transform: scale3d(.8, .8, .8);
            transform: scale3d(.8, .8, .8);
      }

      100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
      }
}

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

效果如下图所示： flip3.gif 完整代码如下：

avatar
文章
阅读
粉丝