Instalasi dan Penggunaan

Menginstal

Instal dengan npm

$ npm install animate.css --save

Atau instal dengan Yarn (ini hanya akan berfungsi dengan alat yang sesuai seperti Webpack, Parcel, dll. Jika Anda tidak menggunakan alat apa pun untuk mengemas atau memaketkan kode, Anda cukup menggunakan metode CDN di bawah)

$ yarn add animate.css

Impor ke file Anda

import 'animate.css';

Atau tambahkan langsung ke halaman web Anda menggunakan CDN

Penggunaan dasar

Setelah menginstal Animate. css, tambahkan kelas

import 'animate.css';

import 'animate.css';

An animated element

Itu dia. Anda memiliki elemen animasi CSS. Super

Animasi dapat meningkatkan UX antarmuka, tetapi perlu diingat bahwa animasi juga dapat mengganggu pengguna Anda. Harap baca bagian dan untuk menghidupkan hal-hal web Anda dengan cara terbaik

Menggunakan

_0

Meskipun perpustakaan memberi Anda beberapa kelas pembantu seperti kelas

Contoh

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

Ketahuilah bahwa beberapa animasi bergantung pada properti

Properti Khusus CSS (Variabel CSS)

Sejak versi 4, Animate. css menggunakan properti khusus (juga dikenal sebagai variabel CSS) untuk menentukan durasi, penundaan, dan iterasi animasi. Ini membuat Animate. css sangat fleksibel dan dapat disesuaikan. Perlu mengubah durasi animasi?

Contoh

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

Properti khusus juga memudahkan untuk mengubah semua properti animasi Anda yang dibatasi waktu dengan cepat. Ini berarti Anda dapat memiliki efek gerak lambat atau selang waktu dengan javascript one-liner

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

Meskipun beberapa browser lama tidak mendukung properti khusus, Animate. css memberikan fallback yang tepat, memperluas dukungannya untuk semua browser yang mendukung animasi CSS

Edit ini di GitHub

Kelas Utilitas

Menghidupkan. css hadir dengan beberapa kelas utilitas untuk menyederhanakan penggunaannya

Kelas tunda

Anda dapat menambahkan penundaan secara langsung pada atribut kelas elemen, seperti ini

Example

Menghidupkan. css memberikan penundaan berikut

An animated element

An animated element

Penundaan yang disediakan adalah dari 1 hingga 5 detik. Anda dapat menyesuaikannya dengan menyetel properti

An animated element

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

Kelas lambat, lebih lambat, cepat, dan lebih cepat

Anda dapat mengontrol kecepatan animasi dengan menambahkan kelas-kelas ini, seperti di bawah ini

$ yarn add animate.css

An animated element

An animated element

An animated element

An animated element

An animated element

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

Kelas

import 'animate.css';

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

$ yarn add animate.css

Perhatikan bahwa beberapa animasi memiliki durasi kurang dari 1 detik. Karena kita menggunakan fungsi

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

Kelas berulang

Anda dapat mengontrol jumlah iterasi animasi dengan menambahkan kelas-kelas ini, seperti di bawah ini

$ yarn add animate.css

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

Seperti kelas penundaan dan kecepatan, kelas

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

$ yarn add animate.css

Perhatikan bahwa

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

Edit ini di GitHub

Praktik terbaik

Animasi dapat sangat meningkatkan UX antarmuka, tetapi penting untuk mengikuti beberapa panduan agar tidak berlebihan dan memperburuk pengalaman pengguna di web-things Anda. Mengikuti aturan berikut harus memberikan awal yang baik

Animasi yang bermakna

Anda harus menghindari menganimasikan elemen hanya untuk kepentingannya. Perlu diingat bahwa animasi harus memperjelas niat. Animasi seperti pencari perhatian (bounce, flash, pulse, dll) harus digunakan untuk menarik perhatian pengguna ke sesuatu yang istimewa di antarmuka Anda dan tidak hanya sebagai cara untuk menghadirkan "kilat" padanya

Masuk dan keluar animasi harus digunakan untuk mengorientasikan apa yang terjadi di antarmuka, dengan jelas menandakan bahwa itu sedang bertransisi ke keadaan baru

Itu tidak berarti bahwa Anda harus menghindari menambahkan kesenangan ke antarmuka, pastikan saja bahwa animasi tidak menghalangi pengguna Anda dan kinerja halaman tidak terpengaruh oleh penggunaan animasi yang berlebihan.

Jangan menganimasikan elemen besar

Hindari itu karena tidak akan memberi banyak nilai bagi pengguna dan mungkin hanya akan menimbulkan kebingungan. Selain itu, ada kemungkinan besar animasinya akan bermutu rendah, yang berpuncak pada UX yang buruk

Jangan menganimasikan elemen root

Menganimasikan tag

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

$ yarn add animate.css

Animasi tak terbatas harus dihindari

Meskipun Animasi. css menyediakan kelas utilitas untuk mengulang animasi, termasuk yang tak terbatas, Anda harus menghindari animasi tanpa akhir. Itu hanya akan mengganggu pengguna Anda dan mungkin mengganggu sebagian besar dari mereka. Jadi, gunakan dengan bijak

Pikirkan keadaan awal dan akhir elemen Anda

Semua Animasi. animasi css menyertakan properti CSS yang disebut

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

Jangan nonaktifkan kueri media // All animations will take twice the time to accomplish document.documentElement.style.setProperty('--animate-duration', '2s'); // All animations will take half the time to accomplish document.documentElement.style.setProperty('--animate-duration', '.5s'); _4

Sejak versi 3. 7. 0 Menghidupkan. css mendukung kueri media

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

Lihat kueri media Pen Prefers-reduce-motion oleh Elton Mesquita (@eltonmesquita) di CodePen

Gotcha

Anda tidak dapat menganimasikan elemen sebaris

Meskipun beberapa browser dapat menganimasikan elemen sebaris, ini bertentangan dengan spesifikasi animasi CSS dan akan merusak beberapa browser atau akhirnya berhenti bekerja. Selalu animasikan elemen level blok atau blok sebaris (kontainer kotak dan fleksibel serta anak-anak juga merupakan elemen level blok). Anda dapat menyetel elemen ke

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

Meluap

Sebagian besar Animasi. animasi css akan memindahkan elemen melintasi layar dan mungkin membuat bilah gulir di web Anda. Ini dapat dikelola menggunakan properti

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

Interval antara pengulangan

Sayangnya, saat ini hal ini tidak mungkin dilakukan dengan CSS murni. Anda harus menggunakan Javascript untuk mencapai hasil ini

Edit ini di GitHub

Penggunaan dengan Javascript

Anda dapat melakukan banyak hal lain dengan animate. css saat Anda menggabungkannya dengan Javascript. Contoh sederhana

$ yarn add animate.css

Anda dapat mendeteksi kapan animasi berakhir

$ yarn add animate.css

atau mengubah durasinya

$ yarn add animate.css

Anda juga dapat menggunakan fungsi sederhana untuk menambahkan kelas animasi dan menghapusnya secara otomatis

$ yarn add animate.css

Dan gunakan seperti ini

$ yarn add animate.css

Jika Anda kesulitan memahami fungsi sebelumnya, lihat const, classList, fungsi panah, dan Janji

Edit ini di GitHub

Migrasi dari v3. x dan Bawah

Menghidupkan. css v4 membawa beberapa peningkatan, peningkatan animasi, dan animasi baru, yang membuatnya layak untuk ditingkatkan. Namun, itu juga datang dengan perubahan besar. kami telah menambahkan awalan untuk semua Animate. kelas css - default ke

import 'animate.css';

Tapi jangan takut. Meskipun build default,

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

import 'animate.css';

Example

Jika Anda menggunakan bundler, perbarui impor Anda

dari

import 'animate.css';

ke

import 'animate.css';

Perhatikan bahwa bergantung pada konfigurasi proyek Anda, ini mungkin sedikit berubah

Jika menggunakan CDN, perbarui tautan di HTML Anda

dari

import 'animate.css';

ke

import 'animate.css';

Dalam kasus proyek baru, sangat disarankan untuk menggunakan versi awalan default karena akan memastikan bahwa Anda tidak akan memiliki kelas yang bertentangan dengan proyek Anda. Selain itu, di versi yang lebih baru, kami mungkin memutuskan untuk menghentikan file

Example

Edit ini di GitHub

Build Kustom

Pembuatan khusus tidak dimungkinkan dari folder node_modules karena kami tidak mengirimkan alat bangunan di modul npm

Menghidupkan. css diberdayakan oleh npm, postcss + postcss-preset-env, yang berarti Anda dapat membuat build kustom dengan cukup mudah, menggunakan CSS masa depan dengan fallback yang tepat

Pertama-tama, Anda memerlukan Node dan semua dependensi lainnya

import 'animate.css';

Selanjutnya, jalankan

Example

• Example
  

  _4. build mentah, mudah dibaca dan tanpa pengoptimalan apa pun

• // All animations will take twice the time to accomplish
  document.documentElement.style.setProperty('--animate-duration', '2s');
  
  // All animations will take half the time to accomplish
  document.documentElement.style.setProperty('--animate-duration', '.5s');
  

  _9. bangunan mini yang siap untuk diproduksi

• Example
  

  _1. build yang diperkecil siap untuk produksi tanpa awalan kelas. Ini seharusnya hanya digunakan sebagai jalur mudah untuk migrasi

Misalnya, jika Anda hanya akan menggunakan beberapa animasi "pencari perhatian", cukup edit file

Example

Example

import 'animate.css';

Sekarang, jalankan saja

Example

Mengubah awalan default

Cukup mudah untuk mengubah awalan animate pada build kustom Anda. Ubah properti

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

Example

import 'animate.css';

kemudian

import 'animate.css';

Mudah sekali

Edit ini di GitHub

Aksesibilitas

Menghidupkan. css mendukung kueri media

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

Edit ini di GitHub

Tim inti

Edit ini di GitHub

Lisensi dan Berkontribusi

Menghidupkan. css dilisensikan di bawah Lisensi Hipokrates

Berkontribusi

Permintaan tarik adalah cara untuk pergi ke sini. Kami hanya memiliki dua aturan untuk mengirimkan permintaan penarikan. cocok dengan konvensi penamaan (camelCase, dikategorikan [memudar, memantul, dll. ]) dan mari kita lihat demo animasi yang dikirim dalam pena. Yang terakhir itu penting

Kode etik

Proyek ini dan semua orang yang berpartisipasi di dalamnya diatur oleh Kode Etik Perjanjian Kontributor. Dengan berpartisipasi, Anda diharapkan menjunjung tinggi kode ini. Silakan laporkan perilaku yang tidak dapat diterima ke animate@eltonmesquita. com

Apa saja delapan properti animasi?

Animasi apa yang dapat Anda lakukan di CSS?

Apa itu animasi CSS

Ada berapa jenis animasi di CSS?