官网简单动画是如何实现的

一.前言

🦉大家好我是一溪风月昨天在摸鱼做网站前端首页的第一屏，借鉴了antD的3D背景，顺便学习了下transform这个强大的属性，今天又是摸鱼的一天，今天打算做下首页的第二屏幕，看到很多官网的效果是滑动到一定的地方会有对应的动画展示相应的需要展示的东西，感觉挺酷的，所以打算研究下是如何实现的，感觉应该是使用过渡和动画来实现的，所以我们来一口气搞定这些CSS的硬核知识，在最后完成我们想要完成的效果。

一.过渡效果

🔆在了解这个值之前我们先从字面理解一下这个属性的作用，transtion翻译过来就是过渡的意思，表示着从一种状态过渡到另外一种状态而不是直接变化的，可能这个属性会使我们的页面元素变动的比较平滑，它使一个CSS属性，它的使用方式如下：

transition-property：指定过渡属性的名字，如果指定的为all表示所有可以过渡的属性，其实就是监听这个属性中某个变量来触发对应的动画。
transition-duration：指定过渡所需要的时间，单位可以使秒s，或者毫秒ms
transition-timing-function：指定过渡动画的变化曲线，有很多种，具体可以查看文档链接
transition-delay：执行过渡动画之前的等待时间。

🐙既然我们已经知道了以上的四个属性的用法，那么我们就来写一个小demo来尝试着使用下。

首先我们创建一个HTML文件然后文件中创建两个元素，如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box {
        width: 900px;
        height: 500px;
        background-color: aliceblue;
        position: relative;
        margin: 0 auto;
        margin-top: 400px;
      }

      .content {
        width: 100px;
        height: 100px;
        font-size: 14px;
        background-color: blueviolet;
        color: black;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="content">魔法卡牌</div>
    </div>
  </body>

</html>

我们让这个方块在长和宽同时在二维的画面中增加两倍。

css 复制代码

.content {
  width: 100px;
  height: 100px;
  font-size: 14px;
  background-color: blueviolet;
  color: black;
  text-align: center;
  line-height: 100px;
  transform: scale(2);
}

我们会发现我们根本看不到他移动的效果，我们加上去，当鼠标移入的时候就让它过渡的增加到原来的两倍

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  font-size: 14px;
  background-color: blueviolet;
  color: black;
  text-align: center;
  line-height: 100px;
  transform: scale(1);
  transition-property: transform;
  /* 过渡宽度属性 */
  transition-duration: 0.3s;
  /* 过渡持续时间为0.3秒 */
  transition-timing-function: ease-in-out;
  /* 过渡效果为先加速后减速 */
  transition-delay: 0.2s;
  /* 过渡延迟时间为0.2秒 */
}

.content:hover {
  transform: scale(2);
}

🐣这就是过渡的基本使用方法，很简单，但是有时候可能我们并不需要，我们可能需要其他中的运动节奏，运动节奏的控制需要transition-timing-function这个属性，那么我们就来看下常用的运动函数有哪些

ease：默认值。过渡效果开始缓慢，然后加速，最后再次减速。这是最常用的时间函数。
linear：过渡效果保持匀速，没有加速或减速的效果。
ease-in：过渡效果开始缓慢，然后逐渐加速。
ease-out：过渡效果开始快速，然后逐渐减速。
ease-in-out：过渡效果开始缓慢，然后加速，最后再次减速。
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线的时间函数。

🐸除了以上四种方式外，transition还支持简写方式可以一次性设置完以上的所有参数

css 复制代码

.element {
  transition: width 0.3s ease-in-out 0.2s;
}

二.关键帧动画

😶‍🌫️不知道你有没有思考过一个问题，我们看的动画片是如何做出来的，其实我们看的动画就是一张一张的照片以一种很快的方式播放的以至于我们眼睛感觉不到它的存在，这样的每一张图片就是一帧，那么什么是关键帧哪？关键帧就是某些时间点上元素的状态，关键帧动画允许您在动画的不同时间点上定义样式，并通过动画属性将其应用到HTML元素上。

😻在开始讲解关键帧的各种属性之前我们先来简单的写一个关键帧的动画，来看下它的效果是怎么样的。

css 复制代码

 @keyframes myAnimation {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.5);
        background-color: red;
      }

      100% {
        transform: scale(1);
      }
    }

    .element {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: myAnimation 2s ease-in-out infinite;
    }

🦄关键帧动画的属性：常用的关键帧属性有很多，下面是一些常用的关键帧属性，并且一个个演示下。

animation-name：指定要应用的关键帧动画的名称。

css 复制代码

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 0% 表示动画的起始状态，也就是动画开始时元素的样式。
100% 表示动画的结束状态，即动画结束时元素的样式。 */

.element {
  animation-name: myAnimation;
}

animation-duration：指定动画的持续时间。

css 复制代码

.element {
  animation-duration: 2s;
}

animation-timing-function：指定动画的时间函数，控制动画的加速和减速效果。

css 复制代码

.element {
  animation-timing-function: ease-in-out;
}

animation-delay：指定动画的延迟时间，在动画开始之前等待一段时间。

css 复制代码

.element {
  animation-delay: 1s;
}

animation-iteration-count：指定动画的循环次数，可以设置为具体次数或infinite表示无限循环。

css 复制代码

.element {
  animation-iteration-count: 3;
}

animation-direction：指定动画的播放方向，可以设置为正向、反向或交替播放。

css 复制代码

.element {
  animation-direction: alternate;
}

animation-fill-mode：指定动画在播放前和播放后如何应用样式。可以设置为none、forwards、backwards或both。

css 复制代码

.element {
  animation-fill-mode: forwards;
}

animation-play-state：指定动画的播放状态，可以设置为running或paused。

css 复制代码

.element {
  animation-play-state: paused;
}

animation：用于同时设置多个动画属性的简写方式。

css 复制代码

.element {
  animation: myAnimation 2s ease-in-out infinite;
}

三.实现官网的滚动动画

🦊学习了以上的全部属性，那么我们就简单的实战一下，首先我直接是在Vue中进行编写的，这里就直接使用Vue的操作方式来写了，首先我们来分析一下思路。

动画的触发条件，当第二屏的容器的一部分滑动到了视口的时候就给它添加有动画的class
编写动画，需要指定动画起始的动画，指定动画结束的样式。
设置让动画只执行一次，并且停留在动画结束时候的样式。

css 复制代码

@keyframes animationContainer {
  from {
    transform: translateX(-50%);
    bottom: -200%;
    background-color: aliceblue;
  }
  to {
    transform: translate(-50%, -50%);
    top: 55%;
  }
}
.content-animation {
  width: 80%;
  height: 300px;
  background-color: aliceblue;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100%;
}
div.elementdisplay {
  width: 80%;
  height: 300px;
  background-color: #409eff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100%;
  animation: animationContainer ease-in-out 2s 1 forwards;
}

🦜想要实现元素到达视口就给这个元素添加上这个类的方法需要使用JS来协助下，当触发时候就动态添加类。

js 复制代码

loadData() {
  let loadmoreDom = document.querySelector('.main-two-screen')
  // 交叉观察器
  const intersectionObserver = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        this.isjudge = true
        this.fontJudge = true
      }
    },
    {
      threshold: 0.8,
    }
  )
  intersectionObserver.observe(loadmoreDom)
},

四.总结

🦉这篇文章主要讲解了过渡和关键帧动画的使用方式方法，过渡和动画在官网类型的网站中使用的很频繁，相对于transform来说比较容易理解和使用，我们在最后实现了这个官网的滑动过渡效果，使用了JS中的交叉观察器来实现，当元素的80%进入视口中就会触发函数，动态添加class实现动画，关于个别API的使用可能我们比较陌生或者不够熟练，当我们想要的时候再进行相关的查找。