Artikel yang menerangkan teknik biasa untuk membuat animasi dengan CSS (Koleksi)-tutorial css-php.cn

Dalam artikel sebelumnya "Kemahiran JS lanjutan yang anda patut ketahui (Ringkasan) ", kami belajar tentang kemahiran JS lanjutan. Artikel berikut akan memperkenalkan anda kepada teknik biasa untuk membuat animasi dengan CSS Mari lihat cara melakukannya bersama-sama.

Artikel yang menerangkan teknik biasa untuk membuat animasi dengan CSS (Koleksi)

peralihan

Terdapat atribut transition dalam CSS, yang boleh memantau perubahan atribut CSS tertentu melalui kawalan perubahan atribut, Kesan animasi ringkas:

Sifat CSS peralihan ialah sifat trengkas untuk sifat peralihan, tempoh peralihan, fungsi pemasaan peralihan dan kelewatan peralihan. ——Dipetik daripada MDN

kod 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>

Salin selepas log masuk

kesan animasi klik di sini untuk melihat alamat https://codepen.io/wjq990112/pen / PoqEemX

Setelah mengalaminya, mari kita bincangkan tentang penggunaan secara terperinci:

kod css

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

Salin selepas log masuk

Anda mungkin tidak dapat memahaminya jika anda tulis seperti ini, kami akan membongkarnya satu demi satu Penyelesaian:

kod css

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

Salin selepas log masuk

dan atribut transition terdiri daripada 4 atribut CSS di atas.

Atribut pertama dan kedua diperlukan dan digunakan untuk menentukan atribut mendengar yang perlu menambah animasi peralihan dan menentukan tempoh animasi.

Atribut ketiga dan keempat adalah pilihan dan digunakan untuk menetapkan kesan dan kelewatan animasi peralihan.

Untuk butiran tentang nilai pilihan fungsi pemasaan peralihan, lihat
https://developer.mozilla.org/zh-CN/docs/Web/CSS /transition-timing- function

Atribut pertama juga mempunyai 2 nilai istimewa: tiada: jangan dengar sebarang atribut semua: dengar semua atribut dan tambah animasi peralihan padanya.

Apabila atribut ketiga diabaikan, item kali kedua akan dihuraikan secara automatik sebagai kelewatan kesan animasi.

Ia masih agak sukar untuk difahami, mari kita berikan contoh:

kod css

peralihan: latar belakang 1s mudah-masuk-keluar 0.2s; >

Contoh di atas adalah sebahagian daripada kod sebelumnya.

bermaksud mendengar perubahan dalam

dan menambah animasi peralihan 1 saat padanya Kesan animasi peralihan ialah ia bermula perlahan dan berakhir dengan perlahan, dan mula melaksanakan selepas atribut berubah selama 0.2. detik. background

Kemudian bahagian kod di atas ini:

kod 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;
}

Salin selepas log masuk

Atribut

dalam kod menambah animasi peralihan kepada transition masing-masing ketiga-tiga atribut teg background``color``width ini berubah, kesan animasi lalai atau yang ditentukan akan ditambahkan secara automatik padanya. class=box

Seterusnya kami akan menggunakannya untuk beberapa kegunaan lanjutan:

Dalam proses melaksanakan animasi, anda mungkin perlu menggunakan kaedah biasa:

Kaedah penutup mata. overflow

digunakan untuk mencapai beberapa kesan yang serupa dengan

penukaran: Tab

kod 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>

Salin selepas log masuk

kesan animasi klik di sini untuk melihat https://codepen . io/wjq990112/pen/MWwrXWo

Untuk mencapai kesan ini, anda hanya perlu menetapkan bekas kepada

;, dan kemudian gunakan overflow: hidden untuk menggunakan tabmendengartransform atribut dalam bekas Gerakkannya ke arah paksi transform: translateX() dan anda selesai. X

Terdapat juga beberapa kesan putaran yang boleh direalisasikan dengan menggunakan

untuk berputar pada satah penyemak imbas Secara lalai adalah untuk berputar dengan pusat geometri sebagai titik tengah. Penggunaan atribut transform: rotateZ();

animasi & bingkai utama

adalah serupa dengan animation Biar saya memperkenalkannya secara terperinci seterusnya. transition

Sifat CSS animasi ialah nama animasi, tempoh animasi, fungsi pemasaan animasi, kelewatan animasi, kiraan lelaran animasi, arah animasi, mod isian animasi dan animasi- mainkan Borang atribut singkatan untuk atribut -state.

Mula-mula cuba kesan putaran mudah:

kod 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>

Salin selepas log masuk

Klik di sini untuk melihat kesan animasi https: // codepen.io/wjq990112/pen/mdJXeqm

Ini ialah animasi putaran asas, menggunakan

dan animation dua sifat CSS yang biasa digunakan untuk animasi. keyframes

animasi

Sekarang mari kita bercakap tentang penggunaan asas:

kod css

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

Salin selepas log masuk

Saya pasti masih tidak fahami dengan cara ini, terus bongkar satu persatu dan terangkan kepada semua orang:

kod 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; /* 设定过渡动画运行或停止 */

Salin selepas log masuk

Saya percaya bahawa kebanyakan atribut mudah difahami, tetapi hanya dua sifat mungkin lebih sukar untuk difahami.

dan animation-direction boleh dikatakan sebagai dua atribut yang paling sukar untuk difahami: animation-fill-mode

kod 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;

Salin selepas log masuk

Ini. Kedua-dua atribut itu boleh dikatakan paling sukar untuk difahami Jika anda ingin melihat kesan selepas menetapkannya, anda boleh bertukar kepada

. MDN

keyframes

Properti CSS ini, saya percaya pelajar yang telah mempelajari beberapa penghasilan animasi mudah mesti faham bahawa ia sangat mudah, ia adalah keyframe.

Tetapkan bingkai utama untuk animasi dan CSS akan mengisi laluan gerakannya secara automatik.

kod css

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

Salin selepas log masuk

上面这段代码，就是为设定了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;
}

Salin selepas log masuk

推荐学习：CSS视频教程

Atas ialah kandungan terperinci Artikel yang menerangkan teknik biasa untuk membuat animasi dengan CSS (Koleksi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!