Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah maksud animate.css?

Apakah maksud animate.css?

WBOY
Lepaskan: 2022-09-14 17:01:19
asal
2710 orang telah melayarinya

"animate.css" bermaksud koleksi kesan animasi yang dibuat menggunakan animasi dalam CSS3 "animate.css" pratetap banyak animasi yang biasa digunakan, yang sesuai untuk kegunaan pantas dan juga mudah untuk pengubahsuaian atas permintaan. Sintaksnya ialah "".

Apakah maksud animate.css?

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

Apakah maksud animate.css?

animate.css ialah koleksi CSS kesan animasi yang dihasilkan menggunakan animasi CSS3 Ia mempratetap banyak animasi yang biasa digunakan dan sangat mudah digunakan. Artikel ini akan memperkenalkan penggunaan animate.css secara terperinci

Animate.css ialah perpustakaan css yang ringkas dan cekap yang merangkumi beberapa animasi yang ringkas dan biasa, yang sesuai untuk kegunaan pantas dan mudah diubah suai atas permintaan.

Import fail

<head>
<link rel="stylesheet" href="animate.min.css">
</head>
Salin selepas log masuk
  • Tambahkan gaya animasi yang ditentukan pada elemen yang ditentukan

<div class="animated bounce"></div>
Salin selepas log masuk

animasi, setiap elemen yang menggunakan kesan animate.css mesti menambah nama kelas ini;

    Jika anda ingin menambah gaya animasi pada elemen secara dinamik, anda boleh melakukannya melalui jquery
$(&#39;#element&#39;).addClass(&#39;animated bounce&#39;);
Salin selepas log masuk
    Selepas kesan animasi dilaksanakan, anda juga boleh menambah acara melalui kod berikut
$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 
animationend&#39;, function);
Salin selepas log masuk

Nota: Apabila kesan dilaksanakan Akhirnya, elemen masih menempati ruang dalam aliran dokumen (walaupun anda tidak dapat melihat elemen itu lagi), jadi jika anda mahu elemen itu benar-benar hilang, sembunyikan elemen apabila animasi selesai, seperti:

(Mempelajari perkongsian video:
$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
 animationend&#39;, function(){$(this).hide();});
Salin selepas log masuk
tutorial video css

, tutorial video html)

Atas ialah kandungan terperinci Apakah maksud animate.css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan