Cara Bermula Dengan Animasi CSS

animasi CSS: kesan dinamik melebihi peralihan CSS

Animasi CSS adalah versi canggih peralihan CSS. Artikel ini akan meneroka semua aspek animasi CSS untuk membantu anda menguasai teknologi reka bentuk web yang kuat ini.

Buat Animasi CSS: Keyframes dan Animation Properties

Untuk membuat animasi CSS, anda perlu menentukan peraturan

yang menentukan nama animasi dan kumpulan peraturan kerangka utama. Kemudian, gunakan animasi ke elemen sasaran. @keyframes

Animasi CSS boleh dikawal melalui pelbagai atribut, termasuk:

(kelewatan animasi), animation-delay (tempoh animasi), animation-duration (nama animasi), animation-name (fungsi pemasaan animasi), 🎜 > (bilangan lelaran animasi), animation-timing-function (arah animasi), animation-iteration-count (status main balik animasi), dan animation-direction (mod pengisian animasi). animation-play-state animation-fill-mode

kawalan animasi: jeda dan gelung

Gunakan atribut

untuk menjeda animasi. Menetapkan harta

ke animation-play-state boleh mencapai gelung tak terhingga. animation-iteration-count infinite

Prestasi dan kebolehcapaian: Gunakan animasi dengan berhati -hati

Walaupun animasi CSS dapat meningkatkan pengalaman pengguna, ia harus digunakan dengan berhati -hati kerana ia mungkin menimbulkan risiko aksesibiliti, contohnya: pesakit dengan penyakit tertentu mungkin mengalami pening atau loya dari animasi, sementara mereka yang mempunyai epilepsi fotosensitif mungkin ada Potensi untuk digunakan pada orang dengan epilepsi fotografi. Di samping itu, prestasi animasi juga dipengaruhi oleh sifat animasi, dan beberapa sifat boleh mencetuskan reflow atau redraw, mengakibatkan kemerosotan prestasi pada peranti berprestasi rendah.

perbezaan antara animasi dan peralihan: perbezaan utama

Terdapat beberapa perbezaan utama antara animasi CSS dan Teknologi Sister mereka Peralihan CSS:

Downgrade Elegant:
• Animasi tidak mempunyai mekanisme penurunan yang elegan.
Loop:
• Animasi boleh diulang, walaupun berulang -ulang selama -lamanya;
Keyframes:
• Animasi menggunakan kerangka utama untuk menghasilkan kesan yang lebih kompleks dan terperinci.
jeda:
• Animasi boleh dijeda semasa kitaran main balik.

Keserasian penyemak imbas: Sokongan penyemak imbas arus perdana

Versi terbaru semua pelayar arus perdana menyokong animasi CSS. Firefox 15 dan lebih awal memerlukan awalan

; Internet Explorer 10 dan 11, serta semua versi Microsoft Edge, juga menyokong animasi prefixed.

-moz-

Sokongan Animasi Pengesanan: Kaedah JavaScript

Sokongan animasi CSS dapat dikesan dalam pelbagai cara. Kaedah pertama adalah untuk menguji sama ada kaedah window objek CSSKeyframeRule wujud:

<code class="language-javascript">const hasAnimations = 'CSSKeyframeRule' in window;</code>

Jika penyemak imbas menyokong @supports peraturan dan CSS.supports() API, anda boleh menggunakan kaedah berikut:

<code class="language-javascript">const hasAnimations = CSS.supports('animation-duration: 2s');</code>

Buat animasi pertama: Peraturan Keyframe dan Aplikasi Animasi

Pertama, tentukan animasi menggunakan peraturan @keyframes. @keyframes Peraturan mempunyai dua fungsi:

• Tetapkan nama animasi
• Peraturan Keyframe Kumpulan

Sebagai contoh, buat animasi yang dipanggil pulse:

<code class="language-css">@keyframes pulse {
    from {
        transform: scale(0.5);
        opacity: .8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}</code>

Kemudian, gunakan animasi ke elemen:

<code class="language-css">.pulse {
    animation: pulse 500ms;
}</code>

Penjelasan terperinci mengenai atribut animasi: Kesan animasi kawalan dengan teliti

Walaupun menggunakan atribut shorthand animation lebih mudah, kadang -kadang menggunakan atribut format yang panjang lebih jelas. Berikut adalah sifat animasi format yang panjang:

Properties Penerangan Nilai awal Animation-Delay Waktu menunggu sebelum pelaksanaan animasi 0s (laksanakan sekarang) Animation-Duration Tempoh kitaran animasi 0s (tiada animasi) animation-name

属性	描述	初始值
animation-delay	动画执行前的等待时间	0s (立即执行)
animation-duration	动画周期持续时间	0s (无动画)
animation-name	@keyframes规则的名称	none
animation-timing-function	计算起始状态和结束状态之间值的计算方式	ease
animation-iteration-count	动画重复次数	1
animation-direction	动画是否反向播放	normal (不反向)
animation-play-state	动画是运行还是暂停	running
animation-fill-mode	指定动画未运行时应用的属性值	none

Nama peraturan none Animation-Timing-Function bagaimana untuk mengira nilai antara keadaan permulaan dan akhir mudah Animation-Diteration-Count bilangan pengulangan animasi 1 animation-arah Adakah animasi dimainkan ke belakang? normal (tidak terbalik) animation-play-state adalah animasi yang berjalan atau menjeda Running animation-fill-mode Nyatakan nilai atribut yang digunakan apabila animasi tidak berjalan none

Animasi Loop: Atribut Animasi-Iterasi-kiraan

Menetapkan harta

ke animation-iteration-count boleh membuat gelung animasi tak terhingga. infinite

Arah animasi: atribut animasi-arah Atribut

menerima empat nilai: animation-direction, normal, reverse, dan alternate, yang digunakan untuk mengawal arah main balik animasi. alternate-reverse

Peratus Keyframes: Buat urutan animasi yang lebih kompleks

urutan animasi yang lebih kompleks boleh diwujudkan dengan menggunakan frage keyrame.

mod pengisian animasi: atribut animasi-fill-mode Atribut

mengawal gaya elemen sebelum dan selepas animasi bermula. animation-fill-mode

animasi jeda: atribut animasi-play-state

Gunakan atribut

untuk menjeda dan memulihkan animasi. animation-play-state

Pengesanan peristiwa animasi: AnimationStart, AnimationEnd and Animationitation Events

Anda boleh menggunakan JavaScript untuk mendengar

, animationstart dan animationend acara. animationiteration

Pengoptimuman Prestasi: Pilih atribut animasi yang sesuai

Beberapa sifat melakukan lebih baik daripada sifat lain. Elakkan animasi sifat yang mencetuskan reflow atau redraw.

FAQ

artikel ini juga merangkumi soalan yang sering ditanya mengenai animasi CSS, yang meliputi perbezaan antara animasi CSS dan peralihan CSS, kawalan kelajuan animasi, peranan

peraturan, animasi susun atur, animasi main balik terbalik, @keyframes atribut, jeda animasi , animasi gelung tak terhingga, animasi elemen SVG, dan perbezaan antara animation-fill-mode dan animation-delay. animation-end-delay

Dengan mengkaji artikel ini, anda akan dapat membuat kesan animasi CSS yang lebih halus dan kompleks untuk meningkatkan interaktiviti dan pengalaman pengguna laman web. Ingat bahawa apabila menggunakan animasi, anda sentiasa mengutamakan prestasi dan kebolehcapaian.

Atas ialah kandungan terperinci Cara Bermula Dengan Animasi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!