Bagaimana untuk memainkan dan menjeda animasi CSS menggunakan sifat tersuai CSS?-tutorial css-php.cn

Bagaimana untuk memainkan dan menjeda animasi CSS menggunakan sifat tersuai CSS?

王林

Lepaskan： 2023-09-19 08:29:07

ke hadapan

1478 orang telah melayarinya

如何使用 CSS 自定义属性播放和暂停 CSS 动画？

Dalam SS, animasi ialah cara yang berkesan untuk menambah kesan visual pada tapak web anda. Walau bagaimanapun, kadangkala kami mahukan lebih kawalan ke atas masa dan cara animasi ini dimainkan. Di sini, kami akan meneroka cara menggunakan sifat tersuai CSS untuk memainkan dan menjeda animasi CSS.

Sebelum meneruskan, kita harus tahu bahawa animasi CSS boleh dibuat menggunakan bingkai utama atau dengan beralih antara dua atau lebih keadaan.

Tatabahasa

@keyframes animation-name {
   /* define the animation steps */
}

Salin selepas log masuk

Kami mentakrifkan animasi dengan memberikan nama dan menggunakan kata kunci @keyframes. Di dalam pendakap kerinting, kami mentakrifkan langkah animasi menggunakan peratusan atau nilai kata kunci.

Main dan jeda animasi dalam CSS

Dalam CSS, memainkan dan menjeda animasi merujuk kepada keupayaan untuk mengawal elemen animasi. Ini ialah cara untuk menambah pergerakan dan minat visual pada tapak web anda.

Main dan jeda animasi membolehkan kami mengawal masa dan cara animasi ini dimainkan. Ini berguna jika kita mahu pengguna dapat menjeda animasi apabila mereka perlu memfokus.

Dalam CSS, kita boleh menggunakan sifat animation-play-state untuk mengawal sama ada animasi sedang berjalan atau dijeda. Secara lalai, sifat animation-play-state ditetapkan kepada running, yang bermaksud animasi akan dimainkan secara automatik apabila halaman dimuatkan. Walau bagaimanapun, kami boleh menggunakan CSS untuk menukar nilai sifat ini untuk memulakan atau menghentikan animasi pada bila-bila masa.

Untuk mencipta kesan animasi main dan jeda menggunakan CSS, anda boleh mengikuti langkah ini -

Langkah 1: Tentukan animasi

Langkah pertama, kita perlu menentukan animasi yang ingin kita kawal. Kita boleh mencipta animasi ringkas menggunakan bingkai utama.

Langkah 2: Cipta kesan main dan jeda

Selepas menentukan animasi, kita perlu mencipta elemen yang mengawal animasi. Kami boleh menggunakan mana-mana elemen HTML seperti butang, kotak semak dan kesan tuding.

Langkah 3: Tentukan sifat tersuai CSS

Kini, kita perlu menentukan sifat tersuai CSS yang memegang keadaan animasi. Kita boleh menggunakan sebarang nama untuk sifat tersuai, tetapi dalam contoh ini kita akan menggunakan --animation-play-state dan --animation-timingfunction.

Kita akan faham konsep di atas melalui contoh.

Contoh 1

Berikut ialah contoh cara membuat animasi tayangan slaid mudah.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center;}
      .box {
         display: flex;
         height: 80px;
         width: 80px;
         border-radius: 10%;
         color: white;
         background-color: green;
         position: relative;
         animation: my-animation 6s infinite;
      }
      .box:hover { animation-play-state: paused;}
      @keyframes my-animation {
         from {left: 0px;}
         to {left: 400px;}
      }
   </style>
</head>
   <body>
      <h2>A simple animation of a slide</h2>
      <div class="box">Mouse Hove to give me a break.</div>
   </body>
</html>

Salin selepas log masuk

Contoh 2

Ini ialah satu lagi contoh cara memainkan dan menjeda animasi CSS menggunakan sifat tersuai CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .box {
         align-items: center;
         background-color: green;
         display: flex;
         height: 80px;
         width: 80px;
         margin-top: 10px;
         border-radius: 10%;
      }
      .my-slide {--animdur: 5s; --animn: slide; }
      [my-animation] {
         animation: var(--animn, none) var(--animdur, 0s) var(--animtf,
         linear) var(--animic, infinite) var(--animdir, alternate) var(--animps,
         running);
      }
      [my-animation-pause]:checked~[my-animation] {
         --animps: paused;
      }
      @keyframes slide {
         from { margin-left: 0%;}
         to {margin-left: calc(100% - 80px);}
      }
   </style>
</head>
   <body>
      <input type="checkbox" my-animation-pause id="move" class="#" />
      <label for="move" class="#">Check Me to play/paus</label>
      <div class="box my-slide" my-animation="stop"></div>
   </body>
</html>

Salin selepas log masuk

Kesimpulan

Menggunakan sifat tersuai CSS untuk memainkan dan menjeda animasi CSS menyediakan cara yang mudah dan berkesan untuk mengawal animasi pada halaman web. Dalam contoh pertama, kami menggunakan animasi keyframe untuk mentakrifkan animasi dan sifat animation-play-state untuk mengawal keadaannya. Dalam contoh kedua, kami menggunakan animasi peralihan dan menukar nilai sifat tersuai untuk mengawal keadaan animasi. Kedua-dua teknik menyediakan cara untuk mencipta animasi dinamik yang boleh dikawal dengan mudah menggunakan CSS.

Atas ialah kandungan terperinci Bagaimana untuk memainkan dan menjeda animasi CSS menggunakan sifat tersuai CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!