Cara menggunakan css animasi bergerak gambar

Question

Animasi CSS memungkinkan untuk menganimasikan transisi dari satu konfigurasi gaya CSS ke konfigurasi lainnya. Animasi terdiri dari dua komponen, gaya yang menjelaskan animasi CSS dan sekumpulan keyframe yang menunjukkan status awal dan akhir gaya animasi, serta kemungkinan titik arah perantara

Nội dung chính Show

Ada tiga keunggulan utama animasi CSS dibandingkan teknik animasi berbasis skrip tradisional

Mereka mudah digunakan untuk animasi sederhana;
Animasi berjalan dengan baik, bahkan di bawah beban sistem sedang. Animasi sederhana sering kali berkinerja buruk di JavaScript. Mesin rendering dapat menggunakan frame-skipping dan teknik lain untuk menjaga performa semulus mungkin
Membiarkan browser mengontrol urutan animasi memungkinkan browser mengoptimalkan kinerja dan efisiensi, misalnya dengan mengurangi frekuensi pembaruan animasi yang berjalan di tab yang saat ini tidak terlihat

Untuk membuat rangkaian animasi CSS, Anda memberi gaya pada elemen yang ingin Anda animasikan dengan properti

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 atau sub-propertinya. Ini memungkinkan Anda mengonfigurasi pengaturan waktu, durasi, dan detail lain tentang bagaimana urutan animasi akan berkembang. Ini tidak mengonfigurasi tampilan sebenarnya dari animasi, yang dilakukan menggunakan aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 seperti yang dijelaskan pada bagian di bawah ini

Sub-properti dari

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 properti adalah

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_3

Menentukan penundaan antara pemuatan elemen dan dimulainya rangkaian animasi dan apakah animasi harus dimulai segera dari awal atau sebagian dari animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_4

Menentukan apakah iterasi pertama animasi harus maju atau mundur dan apakah iterasi berikutnya harus berganti arah pada setiap proses melalui urutan atau reset ke titik awal dan ulangi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5

Menentukan lamanya waktu di mana animasi menyelesaikan satu siklus

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_6

Menentukan cara animasi menerapkan gaya ke targetnya sebelum dan sesudah dijalankan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_7

Menentukan berapa kali animasi harus diulang

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_8

Menentukan nama aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_1 yang menjelaskan keyframe animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

_0

Menentukan apakah akan menjeda atau memutar urutan animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

_1

Menentukan bagaimana animasi bertransisi melalui keyframe dengan membuat kurva akselerasi

Setelah Anda mengonfigurasi pengaturan waktu animasi, Anda perlu menentukan tampilan animasi. Hal ini dilakukan dengan membuat satu atau lebih bingkai utama menggunakan aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1. Setiap keyframe menjelaskan bagaimana elemen animasi harus dirender pada waktu tertentu selama urutan animasi

Karena pengaturan waktu animasi ditentukan dalam gaya CSS yang mengonfigurasi animasi, keyframe menggunakan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

3 untuk menunjukkan waktu selama urutan animasi berlangsung. 0% menunjukkan momen pertama urutan animasi, sedangkan 100% menunjukkan keadaan akhir animasi. Karena dua waktu ini sangat penting, mereka memiliki alias khusus.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

4 dan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5. Keduanya opsional. Jika

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

_4/

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

7 atau

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5/

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

9 tidak ditentukan, browser memulai atau menyelesaikan animasi menggunakan nilai yang dihitung dari semua atribut

Secara opsional, Anda dapat menyertakan bingkai kunci tambahan yang menjelaskan langkah-langkah perantara antara awal dan akhir animasi

Singkatan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 berguna untuk menghemat ruang. Sebagai contoh, beberapa aturan yang telah kami gunakan melalui artikel ini

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

dapat diganti dengan menggunakan steno

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0

p {
  animation: 3s infinite alternate slidein;
}

Untuk mempelajari lebih lanjut tentang urutan di mana nilai properti animasi yang berbeda dapat ditentukan menggunakan steno

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0, lihat halaman referensi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0

Properti tulisan tangan animasi CSS dapat menerima banyak nilai, dipisahkan dengan koma. Fitur ini dapat digunakan ketika Anda ingin menerapkan banyak animasi dalam satu aturan dan mengatur durasi yang berbeda, jumlah iterasi, dll. , untuk setiap animasi. Mari kita lihat beberapa contoh cepat untuk menjelaskan permutasi yang berbeda

Dalam contoh pertama ini, ada tiga durasi dan tiga nilai hitungan iterasi. Jadi setiap animasi diberi nilai durasi dan jumlah iterasi dengan posisi yang sama dengan nama animasi. Animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

_4 diberi durasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

5 dan hitungan iterasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

6, dan animasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

_7 diberi durasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

8 dan hitungan iterasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

9

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Dalam contoh kedua ini, tiga nama animasi ditetapkan, tetapi hanya ada satu durasi dan hitungan iterasi. Dalam hal ini, ketiga animasi diberikan durasi dan jumlah iterasi yang sama

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

Dalam contoh ketiga ini, tiga animasi ditentukan, tetapi hanya dua durasi dan hitungan iterasi. Dalam kasus seperti itu di mana tidak ada cukup nilai dalam daftar untuk menetapkan satu terpisah untuk setiap animasi, siklus penetapan nilai dari item pertama hingga terakhir dalam daftar yang tersedia dan kemudian kembali ke item pertama. Jadi,

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

_4 mendapatkan durasi

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

5, dan

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2 mendapatkan durasi

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

3, yang merupakan nilai terakhir dalam daftar nilai durasi. Penetapan nilai durasi kini disetel ulang ke nilai pertama; . Nilai hitungan iterasi (dan nilai properti lainnya yang Anda tentukan) akan ditetapkan dengan cara yang sama

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

Jika ketidakcocokan jumlah animasi dan nilai properti animasi dibalik, katakanlah ada lima nilai

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5 untuk tiga nilai

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

8, maka nilai properti animasi ekstra atau tidak terpakai, dalam hal ini, dua nilai

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5, jangan berlaku untuk animasi apa pun dan diabaikan

Catatan. Beberapa browser lama (sebelum 2017) mungkin memerlukan awalan;

Contoh sederhana ini memberi gaya pada elemen

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

_0 sehingga teks meluncur masuk dari tepi kanan jendela browser

Perhatikan bahwa animasi seperti ini dapat menyebabkan halaman menjadi lebih lebar dari jendela browser. Untuk menghindari masalah ini, letakkan elemen yang akan dianimasikan dalam wadah, dan atur

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

2 pada wadah

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Dalam contoh ini, gaya untuk elemen

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

_0 menetapkan bahwa animasi harus memakan waktu 3 detik untuk dieksekusi dari awal hingga akhir, menggunakan properti

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5, dan bahwa nama aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 yang menentukan bingkai utama untuk urutan animasi diberi nama "slidein "

Jika kami ingin gaya kustom apa pun pada elemen

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

0 muncul di browser yang tidak mendukung animasi CSS, kami juga akan menyertakannya di sini;

Keyframe ditentukan menggunakan aturan

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1. Dalam hal ini, kami hanya memiliki dua bingkai utama. Yang pertama terjadi pada 0% (menggunakan alias

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

4). Di sini, kami mengonfigurasi margin kiri elemen menjadi 100% (yaitu, di tepi paling kanan dari elemen yang memuatnya), dan lebar elemen menjadi 300% (atau tiga kali lebar elemen yang memuatnya). ). Hal ini menyebabkan frame pertama animasi memiliki header yang ditarik dari tepi kanan jendela browser

Bingkai kunci kedua (dan terakhir) terjadi pada 100% (menggunakan alias

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5). Margin kiri diatur ke 0% dan lebar elemen diatur ke 100%. Ini menyebabkan tajuk menyelesaikan animasinya rata dengan tepi kiri area konten

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Catatan. Muat ulang halaman untuk melihat animasi

Mari tambahkan keyframe lain ke animasi contoh sebelumnya. Katakanlah kita ingin ukuran font header bertambah saat bergerak dari kanan ke kiri untuk sementara waktu, lalu mengecil kembali ke ukuran aslinya. Itu sesederhana menambahkan keyframe ini

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

Kode lengkap sekarang terlihat seperti ini

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Ini memberi tahu browser bahwa 75% dari urutan animasi, header harus memiliki margin kiri sebesar 25% dan lebarnya harus 150%

Catatan. Muat ulang halaman untuk melihat animasi

Untuk membuat animasi berulang, gunakan properti

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

7 untuk menunjukkan berapa kali mengulang animasi. Dalam hal ini, mari kita gunakan

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

_1 untuk mengulangi animasi tanpa batas

p {
  animation: 3s infinite alternate slidein;
}

0

Menambahkannya ke kode yang ada

p {
  animation: 3s infinite alternate slidein;
}

_1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Itu membuatnya berulang, tetapi sangat aneh membuatnya melompat kembali ke awal setiap kali mulai dianimasikan. Yang benar-benar kami inginkan adalah untuk bergerak bolak-balik melintasi layar. Itu mudah dilakukan dengan mengatur

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

4 ke

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

3

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Dan kode lainnya

p {
  animation: 3s infinite alternate slidein;
}

_1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Anda bisa mendapatkan kontrol tambahan atas animasi — serta informasi berguna tentangnya — dengan memanfaatkan acara animasi. Peristiwa ini, diwakili oleh objek

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

_4, dapat digunakan untuk mendeteksi kapan animasi dimulai, selesai, dan memulai iterasi baru. Setiap peristiwa mencakup waktu terjadinya serta nama animasi yang memicu peristiwa tersebut

Kami akan memodifikasi contoh teks geser untuk menampilkan beberapa informasi tentang setiap peristiwa animasi saat itu terjadi, sehingga kami dapat melihat cara kerjanya

Menambahkan CSS

Kita mulai dengan membuat CSS untuk animasinya. Animasi ini akan berlangsung selama 3 detik, disebut "slidein", ulangi 3 kali, dan berganti arah setiap kali. Di

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

_1, lebar dan margin kiri dimanipulasi untuk membuat elemen meluncur melintasi layar

p {
  animation: 3s infinite alternate slidein;
}

_6

Menambahkan pendengar acara animasi

Kami akan menggunakan kode JavaScript untuk mendengarkan ketiga kemungkinan peristiwa animasi. Kode ini mengonfigurasi pendengar acara kami;

p {
  animation: 3s infinite alternate slidein;
}

_7

Ini adalah kode yang cukup standar; . Hal terakhir yang dilakukan kode ini adalah menyetel

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

7 pada elemen yang akan kita animasikan menjadi "slidein";

Mengapa? . Jadi kita akan memulai animasi sendiri dengan menyetel kelas elemen ke gaya yang dianimasikan setelah fakta

Menerima acara

Acara dikirim ke fungsi

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

_9, yang ditunjukkan di bawah ini

p {
  animation: 3s infinite alternate slidein;
}

_8

Kode ini juga sangat sederhana. Ini melihat

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

_0 untuk menentukan jenis peristiwa animasi yang terjadi, lalu menambahkan catatan yang sesuai ke

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

1 (daftar tidak berurutan) yang kami gunakan untuk mencatat peristiwa ini

Outputnya, ketika semua dikatakan dan dilakukan, terlihat seperti ini

Dimulai. waktu berlalu adalah 0
Loop baru dimulai pada waktu 3. 01200008392334
Loop baru dimulai pada waktu 6. 00600004196167
Berakhir. waktu berlalu adalah 9. 234000205993652

Perhatikan bahwa waktunya sangat dekat, tetapi tidak persis, yang diharapkan mengingat waktu yang ditetapkan saat animasi dikonfigurasi. Perhatikan juga bahwa setelah iterasi terakhir animasi, peristiwa

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2 tidak dikirim;

Demi kelengkapan, inilah HTML yang menampilkan konten halaman, termasuk daftar tempat skrip menyisipkan informasi tentang peristiwa yang diterima

kode css

Cara menggunakan css animasi bergerak gambar

Menambahkan CSS

Menambahkan pendengar acara animasi

Menerima acara

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội