CSS로 애니메이션을 만드는 일반적인 기술을 설명하는 문서(컬렉션)-CSS 튜토리얼-php.cn

이전 글 "당신이 알아야 할 고급 JS 스킬(요약)"에서 고급 JS 스킬에 대해 알아보았습니다. 다음 기사에서는 CSS를 사용하여 애니메이션을 만드는 일반적인 기술을 소개합니다.

CSS로 애니메이션을 만드는 일반적인 기술을 설명하는 문서(컬렉션)

transition

CSS에는 transition 속성이 있습니다. 이 속성은 특정 CSS 속성의 변경 사항을 모니터링하고 속성 변경 제어를 통해 간단한 애니메이션 효과를 얻을 수 있습니다. transition属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现简单的动画效果：

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 —— 引用自 MDN

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: #000;
        border-radius: 4px;
        /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
        transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
      }
      .box:hover {
        width: 400px;
        color: #000;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div>
      <div>鼠标悬浮查看效果</div>
    </div>
  </body>
</html>

로그인 후 복사

动画效果点击此处查看地址https://codepen.io/wjq990112/pen/PoqEemX

体验完了，现在来具体讲一下用法：

css代码

transition: transition-property | transition-duration |
  transition-timing-function | transition-delay;

로그인 후 복사

这样写你们估计看不懂，我们一条一条来拆解：

css代码

transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */
transition-duration: 1s; /* 设定过渡动画的时长 */
transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */
transition-delay: 0.2s; /* 设定触发动画的延迟 */

로그인 후 복사

而transition属性就是由上面的 4 条 CSS 属性组合而成。

第一第二个属性是必须项，用于指定侦听需要添加过渡动画的属性以及指定动画时长。

第三第四个属性为可选项，用于设定过渡动画的效果和延迟。

transition-timing-function的可选值详见
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

第一个属性还有 2 个特殊值：none：不对任何属性进行侦听 all：对所有属性进行侦听并为其添加过渡动画。

当省略第三个属性时，第二个时间项会被自动解析为动画效果延迟。

干说还是有点难理解，举个栗子吧：

css代码

transition: background 1s ease-in-out 0.2s;

上面这个例子，就是前面的代码中的一部分。

意思是侦听background的变化，为其添加 1 秒的过渡动画，过渡动画的效果是慢开始慢结束，并在属性变化 0.2 秒后才开始执行。

那么上面代码中的这一段：

css代码

.box {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #000;
  border-radius: 4px;
  /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
  transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
  width: 400px;
  color: #000;
  background: #fff;
}

로그인 후 복사

代码中的transition属性分别为background``color``width加上了过渡动画，当class=box的标签的这三个属性发生变化时，就回自动为其加上默认或指定的动画效果。

接下来我们就用它来做一些进阶的用法：

在实现动画的过程中，可能会需要使用一种常用的方式：overflow障眼法。

用于实现一些类似Tab切换的效果：

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 100px;
        height: 100px;
        overflow: hidden;
      }
      #tabs {
        display: flex;
        width: 200px;
        height: 100px;
        transition: transform 0.3s;
      }
      .tab-pane-1 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: red;
      }
      .tab-pane-2 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: yellow;
      }
      .transform {
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <div>
      <div id="tabs">
        <div>1</div>
        <div>2</div>
      </div>
    </div>
    <button onclick="switchTabPane()">切换Tab</button>

    <script>
      function switchTabPane() {
        var el = document.getElementById(&#39;tabs&#39;)
        el.className = el.className ? &#39;&#39; : &#39;transform&#39;
      }
    </script>
  </body>
</html>

로그인 후 복사

动画效果点击此处查看https://codepen.io/wjq990112/pen/MWwrXWo

实现这个效果只需要将容器设置为overflow: hidden;，然后对容器内的tab侦听transform属性，使用transform: translateX()使其在 X轴方向移动，大功告成了。

还有一些旋转效果也可以使用transform: rotateZ();使其在浏览器平面上旋转实现，默认是以几何中心为中心点进行旋转。

animation & keyframes

animation属性的用法和transition比较相似，接下来由我来详细介绍一下。

animation CSS 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

先做个简单的旋转效果体验一下：

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes rotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(359deg);
        }
      }
      .rotate {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background: red;
        /* 为元素设定 10s 的旋转动画 */
        animation: rotate 10s linear infinite;
      }
      .wrapper {
        display: flex;
        width: 200px;
        height: 200px;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div>
      <div>旋转</div>
    </div>
  </body>
</html>

로그인 후 복사

动画效果点击此处查看https://codepen.io/wjq990112/pen/mdJXeqm

这是一个基础的旋转动画，用到了animation和keyframes两个常用于制作动画的 CSS 属性。

animation

现在我们来讲一下基础用法：

css代码

animation: animation-name | animation-duration | animation-timing-function |
  animation-delay | animation-iteration-count | animation-direction |
  animation-fill-mode | animation-play-state;

로그인 후 복사

这样讲肯定还是不懂，继续一条一条拆解开给大家讲解：

css代码

animation-name: rotate; /* 自定义 keyframes 名 */
animation-duration: 10s; /* 设定单次过渡动画时长 */
animation-timing-function: linear; /* 设定单次过渡动画效果 */
animation-delay: 0s; /* 设定单次过渡动画延迟时间 */
animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */
animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */
animation-fill-mode: none; /* 设定过渡动画的填充模式 */
animation-play-state: running; /* 设定过渡动画运行或停止 */

로그인 후 복사

相信大部分属性都很好理解，只有两个属性可能会比较难理解。

animation-direction和animation-fill-mode应该可以说是最难理解的两个属性了，我们再详细讲解一下：

css代码

/*
 *	normal: 按照 keyframes 设定的动画方向运行
 *	reverse: 按照 keyframes 设定的动画方向的反方向运行
 *	alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行
 *	alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行
 */
animation-direction: normal | reverse | alternate | alternate-reverse;
/*
 *	none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态
 *	forwards: 动画结束后停留在动画的最后一帧
 *	backwards: 动画开始前停留在动画的第一帧
 *	both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧
 */
animation-fill-mode: none | forwards | backwards | both;

로그인 후 복사

这两个属性可以说是最难理解的，如果想看设定之后的效果，可以转战MDN

transition CSS property 전환 속성, 전환 기간, 전환 타이밍 기능 및 전환 지연에 대한 약식 속성입니다. ——MDN

html 코드에서 인용

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

로그인 후 복사

애니메이션 효과 주소를 보려면 여기를 클릭하세요 https://codepen.io/wjq990112/pen/PoqEemX

경험한 후 이제 사용법 자세히 :🎜🎜css code🎜

/*
 *	①
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 1s linear infinite;
}
/*
 *  ②
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 0.5s linear infinite alternate;
}

로그인 후 복사

🎜이렇게 쓰면 이해가 안 되실 수도 있습니다. 하나씩 풀어보겠습니다:🎜🎜css code
🎜rrreee🎜 전환 속성은 위 4가지 항목과 CSS 속성의 조합으로 구성됩니다. 🎜🎜첫 번째와 두 번째 속성은 필수이며 전환 애니메이션을 추가하고 애니메이션 지속 시간을 지정하는 데 필요한 청취 속성을 지정하는 데 사용됩니다. 🎜🎜세 번째 및 네 번째 속성은 선택 사항이며 전환 애니메이션의 효과 및 지연을 설정하는 데 사용됩니다. 🎜🎜🎜transition-timing-function의 선택적 값은 🎜🎜https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function🎜🎜🎜에 자세히 설명되어 있습니다. 첫 번째 속성은 2개의 특수 값이기도 합니다. 없음: 어떤 속성도 듣지 않습니다. all: 모든 속성을 듣고 전환 애니메이션을 추가합니다. 🎜🎜세 번째 속성이 생략되면 두 번째 항목이 자동으로 애니메이션 효과 지연으로 구문 분석됩니다. 🎜🎜아직 이해하기 어렵습니다. 예를 들어 보겠습니다. 🎜🎜css code🎜🎜🎜transition: background 1seasy-in-out 0.2s;
🎜🎜🎜위의 예는 이전 코드 부분. 🎜🎜백그라운드의 변경 사항을 듣고 1초 전환 애니메이션을 추가한다는 의미입니다. 전환 애니메이션의 효과는 천천히 시작하고 천천히 끝나는 것이며, 실행이 시작될 때까지는 실행되지 않습니다. 0.2초 동안 속성이 변경됩니다. 🎜🎜그런 다음 위 코드의 이 섹션: 🎜🎜css code🎜rrreee🎜코드의 transition 속성은 전환 애니메이션을 background``color``width 에 추가합니다. class=box 태그의 세 가지 속성이 변경되면 기본 또는 지정된 애니메이션 효과가 자동으로 추가됩니다. 🎜🎜다음으로 고급 용도로 사용하겠습니다. 🎜🎜애니메이션을 구현하는 과정에서 일반적인 방법인 overflow 블라인드 방법을 사용해야 할 수도 있습니다. 🎜🎜탭 전환과 유사한 효과를 얻는 데 사용됩니다. 🎜🎜html code🎜rrreee🎜🎜애니메이션 효과를 보려면 여기를 클릭하세요. https://codepen.io/wjq990112/pen/MWwrXWo🎜🎜🎜 구현 이 효과를 얻으려면 컨테이너를 overflow:hidden;으로 설정한 다음 탭의 transform 속성을 수신하기만 하면 됩니다. 컨테이너를 삭제하고 transform:transformX()를 사용하여 X축 방향으로 이동하면 작업이 완료됩니다. 🎜🎜브라우저 평면에서 회전하기 위해 transform:rotateZ();를 사용하여 실현할 수 있는 몇 가지 회전 효과도 있습니다. 기본값은 기하학적 중심을 중심점으로 회전하는 것입니다. 🎜🎜animation & keyframes🎜🎜 animation 속성의 사용법은 transition과 유사합니다. 🎜🎜🎜애니메이션 CSS 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode 및 animation-play-의 약어입니다. 상태 속성 속성 형태. 🎜🎜🎜먼저 경험해 볼 수 있는 간단한 회전 효과 만들기: 🎜🎜html 코드
🎜rrreee🎜🎜애니메이션 효과를 보려면 여기를 클릭하세요 https://codepen.io/wjq990112/pen/mdJXeqm🎜🎜🎜이것은 기본입니다 회전 애니메이션은 애니메이션을 만드는 데 일반적으로 사용되는 두 가지 CSS 속성인 animation 및 keyframes을 사용합니다. ㅋㅋㅋ CSS code🎜rrreee🎜저는 대부분의 속성을 믿습니다. 모두 이해하기 쉽지만, 더 이해하기 어려울 수 있는 속성은 두 가지뿐입니다. 🎜🎜animation-direction 및 animation-fill-mode는 가장 이해하기 어려운 두 가지 속성이라고 할 수 있습니다. 자세히 설명하겠습니다. 🎜🎜css code🎜rrreee 🎜이 두 가지 속성은 가장 이해하기 어렵다고 할 수 있습니다. 설정 후 효과를 보려면 MDN으로 전환하면 됩니다. 🎜🎜🎜keyframes🎜🎜🎜이 CSS 속성은 간단한 애니메이션 제작을 배운 학생들이 반드시 이해해야 한다고 믿습니다. 매우 간단하며 키프레임입니다. 🎜🎜애니메이션의 키프레임을 설정하면 CSS가 모션 경로를 자동으로 채웁니다. 🎜🎜css 코드🎜

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

로그인 후 복사

上面这段代码，就是为设定了animation属性的div标签创建了两个关键帧，一个是动画起始位置的样式，另一个是动画结束位置的样式，CSS将自动填充动画的过程（即旋转 359 度）。

不仅仅可以设置开始和结束的位置（0%可以使用from关键字代替，100%可以使用to关键字代替），还可以在动画的运行过程中插入关键帧，例如33%，50%，66%等等，CSS会按照关键帧的样式，对动画进行自动填充。

通常情况下，keyframes会与animation配合使用。

讲完了animation和keyframes的用法，我们来看一道面试题，来自本人 2020 年某跳动实习生招聘一面：

请你使用 CSS 实现一个方块来回移动，无限循环。

这个题目其实有 2 种做法，但是原理都是一样的，这里就不放 HTML 代码了，直接放 CSS 的部分：

/*
 *	①
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 1s linear infinite;
}
/*
 *  ②
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 0.5s linear infinite alternate;
}

로그인 후 복사

推荐学习：CSS视频教程

위 내용은 CSS로 애니메이션을 만드는 일반적인 기술을 설명하는 문서(컬렉션)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!