Perkara yang perlu digunakan untuk mencapai kesan animasi css3-Soal Jawab bahagian hadapan-php.cn

Perkara yang perlu digunakan untuk mencapai kesan animasi css3

WBOY

Lepaskan： 2022-06-07 16:51:51

asal

2330 orang telah melayarinya

Untuk mencapai kesan animasi CSS3: 1. Gunakan peraturan "@keyframes" dengan atribut animasi untuk mencapai kesan animasi 2. Gunakan atribut peralihan untuk mencapai kesan animasi namakan kelewatan lengkung kelajuan masa} ".

Perkara yang perlu digunakan untuk mencapai kesan animasi css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apa yang perlu digunakan untuk mencapai kesan animasi css3

1 Apakah itu

Animasi CSS (Animasi CSS) disyorkan untuk helaian gaya berlatarkan untuk membolehkan. kebolehskalaan Elemen bahasa penanda (XML) menggunakan modul animasi CSS

merujuk kepada proses elemen secara beransur-ansur beralih daripada satu gaya ke gaya yang lain

Terdapat banyak kesan animasi biasa, seperti terjemahan, Putaran, penskalaan , dsb. Animasi kompleks ialah gabungan berbilang animasi ringkas

Cara untuk melaksanakan animasi dalam css adalah seperti berikut:

peralihan untuk melaksanakan animasi kecerunan

animasi Laksanakan animasi tersuai

2. Kaedah pelaksanaan

peralihan Laksanakan animasi kecerunan

Atribut peralihan adalah seperti berikut:

harta benda: isikan sifat css yang perlu ditukar
tempoh: unit masa (s atau ms) yang diperlukan untuk melengkapkan kesan peralihan
fungsi pemasaan: lengkung kelajuan kesan lengkap
kelewatan: masa pencetus kelewatan kesan animasi

di mana fungsi pemasaan Nilai-nilai adalah seperti berikut:

Perihalan Nilai

kelajuan seragam linear (sama dengan cubic-bezier(0,0 ,1,1))
mudah dari lambat ke cepat ke perlahan semula (cubic-bezier(0.25,0.1,0.25,1))
kemudahan masuk perlahan-lahan menjadi lebih pantas (sama dengan cubic-bezier (0.42,0,1,1))
ease-out perlahan-lahan perlahan (sama dengan cubic-bezier(0 ,0,0.58,1))
kemudahan keluar mula-mula menjadi lebih cepat dan kemudian lebih perlahan (sama dengan cubic-bezier(0.42,0,0.58,1)), pudar- berkuat kuasa
cubic-bezier(n,n,n,n) Tentukan nilai anda sendiri dalam fungsi cubic-bezier. Nilai yang mungkin adalah nilai antara 0 dan 1

Nota: tidak semua atribut boleh menggunakan peralihan, seperti display:none<->display:block

Sebagai contoh, sedar kesan animasi apabila tetikus bergerak ke atas

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

animasi untuk melaksanakan animasi tersuai

animasi ialah singkatan daripada 8 atribut, seperti berikut:

tempoh animasi menentukan masa yang diperlukan untuk animasi melengkapkan satu kitaran, dalam saat (s) Atau milisaat (ms), lalainya ialah 0
fungsi pemasaan-animasi menentukan fungsi pemasaan animasi, iaitu, lengkung kelajuan animasi, lalai ialah "kemudahan" linear , ease, ease-in, ease-out, ease-in-out
animasi-delay menentukan masa tunda animasi, iaitu, apabila animasi bermula, lalai ialah 0
animation-iteration-count menentukan bilangan masa main balik animasi, lalai ialah 1
arah animasi-menentukan arah main balik animasi, lalai adalah normal biasa, songsang, silih ganti, ganti-balik
mod isian-animasi menentukan mod isian animasi. Lalai ialah tiada ke hadapan, ke belakang, kedua-duanya
keadaan main-animasi menentukan keadaan main balik animasi, berjalan atau dijeda. Lalai sedang berjalan, penjeda
nama-animasi menentukan nama animasi @keyframes

Animasi CSS hanya perlu mentakrifkan beberapa bingkai utama , dan Untuk bingkai yang selebihnya, penyemak imbas akan interpolasi dan mengira berdasarkan fungsi pemasaan,

takrifkan bingkai utama melalui @keyframes

Oleh itu, jika kita ingin membuat elemen berputar dalam bulatan , anda hanya perlu menentukan bingkai mula dan akhir:

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

Salin selepas log masuk

dari mewakili bingkai pertama, untuk mewakili bingkai akhir

Anda juga boleh menggunakan peratusan untuk huraikan Tempoh hayat

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Salin selepas log masuk

Selepas menentukan kerangka utama, anda boleh menggunakannya secara terus:

animation: rotate 2s;

Salin selepas log masuk

3. Ringkasan

peralihan (Transformasi ) Digunakan untuk menetapkan gaya elemen Ia mempunyai kesan yang serupa dengan animasi, tetapi butirannya sangat berbeza

transformasi (ubah bentuk) Digunakan untuk memutar, menskala, menggerakkan atau mencondongkan elemen dan menetapkan Animasi. gaya tidak ada kaitan dengannya. Ia digunakan untuk menetapkan "penampilan" elemen sama seperti warna

terjemah (pergerakan) hanyalah nilai atribut transformasi, iaitu, bergerak

<.>animasi (animasi) Digunakan untuk menetapkan atribut animasi Ia adalah atribut yang disingkatkan dan mengandungi 6 atribut

(Belajar perkongsian video:

tutorial video css).

Atas ialah kandungan terperinci Perkara yang perlu digunakan untuk mencapai kesan animasi css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!