Rumah > Artikel > hujung hadapan web > Perkara yang perlu digunakan untuk mencapai kesan animasi css3
Perkara yang perlu digunakan untuk mencapai kesan animasi css3
- WBOYasal
- 2022-06-07 16:51:512345semak imbas
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} ".
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:nonee09be6022d700e04aeaa85a5f42fdcb2display: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>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);
}
}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);
}
}Selepas menentukan kerangka utama, anda boleh menggunakannya secara terus:
animation: rotate 2s;
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!