Cara Bermain dan Jeda Animasi CSS dengan CSS Custom Properties

Main dan jeda animasi CSS: Gunakan sifat tersuai CSS untuk mengawalnya

Artikel ini membincangkan animasi CSS @keyframes , memberi tumpuan kepada cara menjeda dan mengawal animasi. Walaupun harta animation-play-state boleh digunakan untuk bekerjasama dengan JavaScript untuk mengawal, terdapat banyak butiran. Kami akan memperkenalkan kaedah persediaan yang lebih fleksibel yang menggunakan sifat tersuai CSS untuk membolehkan kawalan animasi yang baik.

Kepentingan menjeda animasi

Apabila membangunkan slaid yang didorong oleh CSS, saya melihat fenomena yang menarik: animasi yang tidak berada di tingkap masih berjalan! Ini membuatkan saya berfikir: Adakah animasi yang sedang berjalan masih memakan sumber CPU/GPU, sehingga mempengaruhi prestasi halaman?

Walaupun panel prestasi DevTools tidak dapat memaparkan penggunaan animasi bingkai "luar skrin", animasi tidak berhenti sejenak ketika menatal dari slaid dan kembali lagi, tetapi terus berjalan ke skrin seterusnya.

Oleh itu, adalah penting untuk mengkaji bagaimana animasi dijeda, yang berkaitan dengan:

1. Prestasi: Elakkan penggunaan sumber yang tidak perlu.
2. Kawalan: Menyediakan kawalan pengguna ke atas animasi.
3. Kebolehcapaian: Memandangkan sesetengah pengguna mungkin sensitif terhadap animasi.

Cara asas untuk menjeda animasi

Di CSS, satu-satunya cara untuk menjeda animasi adalah menggunakan harta animation-play-state dan menetapkan nilainya kepada paused :

 .paused {
  Animasi-bermain-Negeri: Jeda;
}

Di JavaScript, harta ini adalah animationPlayState , dan kaedah penetapan adalah seperti berikut:

 element.style.AnimationPlayState = 'Jeda';

Kami boleh membuat togol permainan/jeda dengan membaca nilai semasa animationPlayState :

 const running = element.style.AnimationPlayState === 'Running';
element.style.animationplayState = Running? 'dijeda': 'berlari';

Satu lagi cara untuk menjeda animasi adalah untuk menetapkan animation-duration ke 0s . Animasi sebenarnya masih berjalan, tetapi sejak tempoh sifar, tiada tindakan dilihat. Walau bagaimanapun, ini bukan jeda sebenar.

Penghapusan langsung animasi ( animation: none !important; ) bukanlah jeda sebenar sama ada.

Sifat tersuai dengan atribut data dan CSS

Kami menggunakan atribut data (seperti data-animation ) sebagai pemilih CSS dan menggunakan atribut adat CSS sebagai nilai atribut animasi:

<div data-animation=""></div>

 [data-animasi] {
  Animasi:
    var (-animn, tiada)
    var (-animdur, 1s)
    var (-animtf, linear)
    var (-animdel, 0s)
    var (-animik, tak terhingga)
    var (-animdir, alternatif)
    var (-animfm, tiada)
    var (-animps, berjalan);
}

Melalui sifat tersuai, kita dapat mengawal semua aspek animasi. Kelebihan sifat adat CSS ialah mereka boleh dibaca dan ditetapkan dalam CSS dan JavaScript, dan dapat mengurangkan jumlah kod CSS.

Animasi itu sendiri menggunakan pemilih kelas dan mengemas kini pembolehubah dalam pemilih [data-animation] :

 /* Kelas animasi*/
.a-pulse {
  --Animn: Pulse;
}
.a-slide {
  --Animdur: 3S;
  --Animn: slaid;
}

/* Kerangka kunci*/
@KeyFrames Pulse {
  / * ... */
}
@KeyFrames Slide {
  / * ... */
}

Contoh: Gunakan helah kotak semak untuk menjeda animasi

Buat kotak semak untuk mengawal jeda untuk semua animasi:

<input type="checkbox" id="data-animation-pause">

 [data-animasi-pause]: diperiksa ~ [data-animasi] {
  --Animps: Jeda;
}

Klik kotak semak untuk menjeda/mainkan semua animasi tanpa JavaScript.

Tayangan slaid CSS sahaja

Saya gunakan<details></details> Tags membuat slaid yang secara automatik menukar slaid melalui autoplay animasi aktif, setiap slaid mempunyai animasi sekunder sendiri. Atribut --animps mengawal status main balik animasi, --img-animps mengawal status main balik animasi sekunder.

Untuk mengelakkan kelebihan GPU, idealnya, animasi utama harus menjeda semua animasi sekunder. Pelayar Chrome (pada masa ini) boleh mengemas kini CSS Custom Properties dari @keyframes Animation.

Kemas kini harta --img-animps dalam animasi utama @keyframes :

 @KeyFrames Autoplay {
  / * ... */
  51% {--img-animps: dijeda} /* berhenti! */
  / * ... */
}

Untuk bersesuaian dengan penyemak imbas lain, nilai awal perlu ditetapkan untuk running .

Dayakan prefers-reduced-motion

Kita boleh menggunakan pertanyaan media prefers-reduced-motion untuk bertindak balas terhadap keutamaan pengguna:

 @media (lebih suka-dikurangkan-gerakan) {
  [data-animasi = "alternatif"] {
    --Animdur: 4S;
    --Animn: kelegapan;
  }
  / * ... */
}

Jeda animasi menggunakan JavaScript

Kita boleh menggunakan JavaScript untuk melangkah melalui semua elemen [data-animation] dan menukar atribut --animps :

 // ... kod javascript ...

Menggunakan IntersectionObserver

Untuk secara automatik memainkan dan menjeda animasi, kita boleh menggunakan IntersectionObserver :

 // ... kod javascript ...

Tambahkan audio ke slaid (bonus)

Tambahkan tag audio dan mengawal main balik dan jeda di JavaScript:

<audio src="your-audio.mp3"></audio>

 // ... kod javascript ...

Melalui kaedah di atas, kita boleh mengawal main balik dan jeda animasi CSS, dan meningkatkan prestasi halaman dan aksesibiliti.

Atas ialah kandungan terperinci Cara Bermain dan Jeda Animasi CSS dengan CSS Custom Properties. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!