Apa itu animasi keyframe css?

Louis adalah pengembang front-end, penulis, dan penulis yang berbasis di Toronto, Kanada. Dia menyusun buletin Web Tools Weekly dan Tech Productivity dan blog tentang … Selengkapnya tentang Louis ↬

Buletin Email

Email (menghancurkan) Anda

Kiat mingguan tentang front-end & UX
Dipercaya oleh 200.000+ orang

  • Apa itu animasi keyframe css?
    Daftar Periksa Desain Antarmuka Cerdas

  • Apa itu animasi keyframe css?
    Front-End SmashingConf 2023

  • Apa itu animasi keyframe css?
    Prinsip Universal Tipografi dengan Elliot Jay Stocks

  • Apa itu animasi keyframe css?
    Bersiaplah untuk peran komunikasi hari ini MS Northwestern dalam Desain Informasi
  • Apa itu animasi keyframe css?
    Pelatihan UX Pola Desain Antarmuka

Pada artikel ini, Louis Lazaris mencakup semua bagian penting dari sintaks untuk animasi CSS. Jika Anda belum mulai menggunakan animasi keyframe CSS, inilah kesempatan Anda untuk memulai

Sekarang Anda mungkin pernah mendengar setidaknya sesuatu tentang animasi di CSS3 menggunakan sintaks berbasis keyframe. Modul animasi CSS3 dalam spesifikasi telah ada selama beberapa tahun sekarang, dan berpotensi menjadi bagian besar dari desain Web

Dengan menggunakan animasi keyframe CSS, pengembang dapat membuat animasi yang halus dan dapat dipelihara yang berkinerja relatif baik dan tidak memerlukan banyak skrip. Ini hanyalah cara lain CSS3 membantu memecahkan masalah dunia nyata dengan cara yang elegan. Jika Anda belum mulai mempelajari sintaks untuk animasi CSS, inilah kesempatan Anda untuk bersiap ketika bagian spesifikasi CSS3 ini melewati tahapan

Dalam artikel ini, kami akan membahas semua bagian penting dari sintaksis, dan kami akan memberi tahu Anda tentang dukungan browser sehingga Anda tahu kapan harus mulai menggunakannya

Apa itu animasi keyframe css?
Pemandangan Lanskap Animasi Bingkai Kunci CSS

Lebih banyak setelah melompat. Lanjutkan membaca di bawah ↓

Temui Smashing Workshops di front-end & UX, dengan takeaway praktis, sesi langsung, rekaman video, dan tanya jawab yang ramah. Pada sistem desain, UX, kinerja web, dan CSS/JS. Dengan Brad Frost, Christine Vallaure dan banyak lainnya

Lompat ke bengkel ↬

Adegan Pemandangan Animasi Sederhana

Untuk tujuan artikel ini, saya telah membuat adegan lanskap animasi sederhana untuk memperkenalkan berbagai aspek sintaks. Anda dapat melihat halaman demo untuk mendapatkan gambaran tentang apa yang akan saya jelaskan. Halaman ini menyertakan sidebar yang menampilkan kode CSS yang digunakan untuk berbagai elemen (matahari, bulan, langit, tanah, dan awan). Lihat sekilas, lalu ikuti saat saya menjelaskan berbagai bagian modul animasi CSS3

(CATATAN. Versi Safari sebelum 5. 1 memiliki bug yang mencegah animasi selesai dengan benar. Lihat lebih lanjut di bawah judul "Mode Isi Animasi". )

Saya akan menjelaskan CSS yang terkait hanya dengan salah satu elemen. matahari animasi. Itu sudah cukup untuk memberi Anda pemahaman yang baik tentang animasi berbasis keyframe. Untuk elemen lain dalam demo, Anda dapat memeriksa kode di halaman demo menggunakan tab

At-Aturan @keyframes

Hal tidak biasa pertama yang akan Anda perhatikan tentang kode animasi CSS3 apa pun adalah aturan

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
2 @. Menurut spesifikasi, aturan @ CSS khusus ini diikuti oleh pengidentifikasi (dipilih oleh pengembang) yang dirujuk di bagian lain dari CSS

Aturan @ dan pengidentifikasinya kemudian diikuti oleh sejumlah kumpulan aturan (mis. e. aturan gaya dengan blok deklarasi, seperti pada kode CSS normal). Kumpulan aturan ini dibatasi oleh kurung kurawal, yang menyarangkan kumpulan aturan di dalam aturan @, seperti yang akan Anda temukan dengan aturan @ lainnya

Inilah aturan @ yang akan kita gunakan

@keyframes sunrise {
    /* rule sets go here … */
}
_

Kata

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
_3 adalah pengidentifikasi pilihan kami yang akan kami gunakan untuk merujuk ke animasi ini

Perhatikan bahwa saya tidak menggunakan awalan vendor apa pun untuk semua contoh kode di sini dan di demo. Saya akan membahas dukungan browser di akhir artikel ini, tetapi untuk saat ini baru disadari bahwa saat ini tidak ada browser yang mendukung sintaks standar ini, jadi agar kode berfungsi, Anda harus menyertakan semua awalan vendor

Pemilih Keyframe

Mari tambahkan beberapa set aturan di dalam aturan @

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}

Dengan penambahan kumpulan aturan baru tersebut, kami telah memperkenalkan pemilih keyframe. Dalam contoh kode di atas, pemilih keyframe adalah

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
4,
@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
5,
@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
6, dan
@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
7. Pemilih
@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
4 dan
@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
7 dapat diganti dengan kata kunci "dari" dan "ke", masing-masing, dan Anda akan mendapatkan hasil yang sama

Masing-masing dari empat rangkaian aturan dalam contoh ini mewakili cuplikan elemen animasi yang berbeda, dengan gaya yang menentukan tampilan elemen pada titik tersebut dalam animasi. Poin yang tidak ditentukan (misalnya, dari 34% hingga 65%) terdiri dari periode transisi antara gaya yang ditentukan

Meskipun spesifikasinya masih dalam pengembangan, beberapa aturan telah ditentukan yang harus diikuti oleh agen pengguna. Misalnya, urutan bingkai utama tidak terlalu penting. Bingkai kunci akan diputar dalam urutan yang ditentukan oleh nilai persentase, dan tidak harus urutan kemunculannya. Jadi, jika Anda menempatkan keyframe "to" sebelum keyframe "from", animasi akan tetap diputar dengan cara yang sama. Selain itu, jika "ke" atau "dari" (atau padanannya berdasarkan persentase) tidak dideklarasikan, browser akan membuatnya secara otomatis. Jadi, set aturan di dalam aturan @ tidak diatur oleh kaskade yang Anda temukan di set aturan CSS biasa

Keyframes Yang Menghidupkan Matahari

Untuk tujuan menganimasikan matahari dalam demo ini, saya telah menetapkan empat bingkai utama. Seperti disebutkan, kode di atas menyertakan komentar yang menjelaskan perubahan tersebut

Pada keyframe pertama, matahari berwarna merah (seolah-olah baru terbit atau terbenam), dan posisinya di bawah tanah (i. e. tidak terlihat). Secara alami, elemen itu sendiri harus diposisikan secara relatif atau absolut agar nilai

0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
0 dan
0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
1 memiliki efek apa pun. Saya juga menggunakan indeks-z untuk menumpuk elemen (untuk memastikan, misalnya, tanah berada di atas matahari). Perhatikan bahwa satu-satunya gaya yang ditampilkan di bingkai utama adalah gaya yang dianimasikan. Gaya lain (seperti
0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
_2 dan
0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
3, yang tidak dianimasikan) dideklarasikan di tempat lain dalam lembar gaya dan karenanya tidak ditampilkan di sini

0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}

Sekitar sepertiga dari animasi (33%), matahari berada pada bidang horizontal yang sama tetapi telah terbit dan berubah menjadi kuning-oranye (untuk mewakili siang hari penuh)

33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}

Kemudian, sekitar dua pertiga animasi (66%), matahari telah bergerak ke kiri sekitar 300 piksel tetapi tetap berada pada bidang vertikal yang sama. Perhatikan sesuatu yang lain di keyframe 66%. Saya telah mengulangi warna yang sama dari bingkai utama 33%, agar matahari tidak terlalu cepat berubah kembali menjadi merah

66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}

Akhirnya, matahari berangsur-angsur bergerak ke keadaan terakhirnya (merah penuh) saat menghilang di bawah tanah

100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}

Mengaitkan Nama Animasi Dengan Sebuah Elemen

Inilah potongan kode berikutnya yang akan kami tambahkan dalam contoh kami. Itu mengaitkan nama animasi (dalam hal ini, kata

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
3) dengan elemen tertentu dalam HTML kami

#sun.animate {
    animation-name: sunrise;
}

Di sini kami memperkenalkan properti

0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
5. Nilai properti ini harus cocok dengan pengidentifikasi dalam aturan
0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
6 yang ada, jika tidak, animasi tidak akan muncul. Dalam beberapa keadaan, Anda dapat menggunakan JavaScript untuk menyetel nilainya ke
0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
7 (satu-satunya kata kunci yang telah dipesan untuk properti ini) untuk mencegah terjadinya animasi

Objek yang kami targetkan adalah elemen dengan id

0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
8 dan kelas
0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
9. Alasan saya menggandakan id dan kelas seperti ini adalah agar saya dapat menggunakan skrip untuk menambahkan nama kelas
0% {
    bottom: 0; /* sun at bottom */
    left: 340px; /* sun at right */
    background: #f00; /* sun is red */
}
9. Di demo, saya memulai halaman secara statis; . Ini akan memicu semua animasi pada saat yang sama dan akan memungkinkan animasi dikontrol oleh pengguna

Tentu saja, itu hanya salah satu cara untuk melakukannya. Seperti halnya apa pun di CSS atau JavaScript, ada cara lain untuk mencapai hal yang sama

Durasi Dan Fungsi Pengaturan Waktu Animasi

Mari tambahkan dua baris lagi ke CSS kita

#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
}

Anda dapat menentukan durasi animasi menggunakan properti

33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
2. Durasi mewakili waktu yang dibutuhkan untuk menyelesaikan satu iterasi animasi. Anda dapat menyatakan nilai ini dalam detik (misalnya,
33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
3), milidetik (
33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
4), dan detik dalam notasi desimal (
33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
5)

Spesifikasi tampaknya tidak menentukan semua unit pengukuran waktu yang tersedia. Namun, tampaknya tidak mungkin ada orang yang membutuhkan waktu lebih lama dari detik;

Properti

33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
_6 , saat dideklarasikan untuk seluruh animasi, memungkinkan Anda menentukan bagaimana animasi berkembang selama satu iterasi animasi. Nilai untuk
33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
_6 adalah
33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
8,
33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
9,
66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
0,
66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
1 dan banyak lagi,

Sebagai contoh kita, saya telah memilih

33% {
    bottom: 340px; /* sun rises */
    left: 340px;
    background: #ffd630; /* changes color */
}
8, yang merupakan default. Jadi dalam hal ini, kita dapat mengabaikan properti dan animasi akan terlihat sama

Selain itu, Anda dapat menerapkan fungsi pengaturan waktu tertentu untuk setiap bingkai utama, seperti ini

@keyframes sunrise {
   0% {
      background: #f00;
      left: 340px;
      bottom: 0;
      animation-timing-function: ease;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
      animation-timing-function: linear;
   }

   66% {
      left: 40px;
      bottom: 340px;
      background: #ffd630;
      animation-timing-function: steps(4);
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
      animation-timing-function: linear;
   }
}

Fungsi pengaturan waktu yang terpisah menentukan masing-masing bingkai utama di atas. Salah satunya adalah nilai

66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
_3, yang menyentakkan animasi ke depan sejumlah langkah yang telah ditentukan sebelumnya. Bingkai kunci terakhir (
@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
7 atau
66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
5) juga memiliki fungsi pengaturan waktunya sendiri, tetapi karena ini untuk keadaan akhir dari animasi yang diputar maju, fungsi pengaturan waktunya hanya berlaku jika animasi diputar secara terbalik

Dalam contoh kami, kami tidak akan menentukan fungsi pengaturan waktu tertentu untuk setiap bingkai utama, tetapi ini cukup untuk menunjukkan bahwa itu mungkin

Jumlah dan Arah Iterasi Animasi

Sekarang mari tambahkan dua baris lagi ke CSS kita

#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
}

Ini memperkenalkan dua properti lagi. yang memberi tahu animasi berapa kali diputar, dan yang memberi tahu browser apakah akan mengganti urutan bingkai pada beberapa iterasi atau tidak

Properti

66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
_6 disetel ke
66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
7, artinya animasi hanya akan diputar sekali. Properti ini menerima nilai bilangan bulat atau
66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
8

Selain itu, properti

66% {
    bottom: 340px;
    left: 40px; /* sun moves left across sky */
    background: #ffd630; /* maintains its color */
}
_9 disetel ke
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
0 (default), yang berarti animasi akan diputar dengan arah yang sama (dari awal hingga akhir) setiap kali dijalankan. Dalam contoh kita, animasi disetel untuk berjalan hanya sekali, sehingga properti tidak diperlukan. Nilai lain yang dapat kita tentukan di sini adalah
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
_1, yang membuat animasi diputar secara terbalik pada setiap iterasi lainnya. Biasanya, agar nilai
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
1 berlaku, jumlah iterasi harus memiliki nilai
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
3 atau lebih tinggi

Delay dan Play State Animasi

Mari tambahkan dua baris kode lagi

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
0

Pertama, kami memperkenalkan properti

100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
_4, yang berfungsi persis seperti yang Anda pikirkan. itu memungkinkan Anda untuk menunda animasi dengan jumlah waktu yang ditentukan. Menariknya, properti ini dapat memiliki nilai negatif, yang menggerakkan titik awal di tengah animasi sesuai dengan nilai negatif

Properti

100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
_5, yang dari spec, menerima salah satu dari dua kemungkinan nilai.
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
6 dan
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
7. Nilai ini memiliki penggunaan praktis yang terbatas. Standarnya adalah
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
_6, dan nilai
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
7 hanya membuat animasi dimulai dalam keadaan dijeda, hingga diputar secara manual. Anda tidak dapat menentukan status
100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
7 di CSS untuk keyframe individual;

Mode Isi Animasi

Kami akan menambahkan satu baris lagi ke kode kami, properti untuk menentukan "mode isian"

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}
_1

Properti

#sun.animate {
    animation-name: sunrise;
}
_1 memungkinkan Anda menentukan gaya elemen animasi sebelum dan/atau setelah animasi dijalankan. Nilai
#sun.animate {
    animation-name: sunrise;
}
_2 menyebabkan gaya di bingkai kunci pertama diterapkan sebelum animasi berjalan. Nilai
#sun.animate {
    animation-name: sunrise;
}
_3 menyebabkan gaya di keyframe terakhir diterapkan setelah animasi berjalan. Nilai
#sun.animate {
    animation-name: sunrise;
}
_4 melakukan keduanya

MEMPERBARUI. Properti

#sun.animate {
    animation-name: sunrise;
}
_1 tidak ada dalam draf spesifikasi terbaru, tetapi ditemukan di. Juga, versi Safari tertentu (5. 0 dan yang lebih lama) hanya akan menerapkan nilai "maju" jika ada tepat dua bingkai utama yang ditentukan. Peramban ini sepertinya selalu menggunakan bingkai utama ke-2 sebagai status "maju", yang tidak dilakukan oleh peramban lain; . Ini diperbaiki di Safari 5. 1

Steno

Terakhir, spesifikasi menjelaskan untuk animasi, yang menggabungkan enam properti yang dijelaskan di atas. Ini mencakup semua hal kecuali

100% {
    bottom: 0; /* sun sets */
    left: 40px;
    background: #f00; /* back to red */
}
_5 dan
#sun.animate {
    animation-name: sunrise;
}
1

Beberapa Catatan Pada Halaman Demo Dan Dukungan Browser

Seperti yang disebutkan, kode dalam artikel ini hanya untuk menganimasikan satu elemen dalam demo. matahari. Untuk melihat kode lengkap, kunjungi halaman demo. Anda dapat melihat semua sumber secara bersamaan atau menggunakan tab di sidebar untuk melihat kode untuk masing-masing elemen dalam animasi

Demo tidak menggunakan gambar apa pun, dan animasinya tidak bergantung pada JavaScript. Matahari, bulan, dan awan semuanya dibuat menggunakan

#sun.animate {
    animation-name: sunrise;
}
8 CSS3, dan satu-satunya skrip di halaman adalah untuk tab di sebelah kanan dan untuk tombol yang memungkinkan pengguna memulai dan menyetel ulang animasi

Berikut adalah browser yang mendukung animasi keyframe CSS3

  • Chrome 2+,
  • Safari 4+,
  • Firefox 5+,
  • IE10 PP3,
  • iOS Safari 3. 2+,
  • Android 2. 1+

Meskipun belum ada pengumuman resmi, dukungan di Opera diharapkan

Jika Anda membuat kode animasi menggunakan satu sintaksis berbasis vendor, Anda dapat menggunakan alat seperti Prefixr atau Animation Fill Code untuk secara otomatis mengisikan kode tambahan untuk Anda

Bagaimana cara kerja bingkai kunci CSS?

Dalam CSS, keyframe digunakan untuk animasi. Ini memberi Anda lebih banyak kendali atas animasi yang ingin Anda tampilkan. Animasi dibuat dengan mengubah secara bertahap dari satu gaya ke gaya lainnya . Anda dapat mengubah gaya CSS sebanyak yang Anda inginkan.

Apa yang dijelaskan animasi keyframe?

Untuk membuat tindakan dalam rangkaian animasi digital, Anda harus terlebih dahulu menentukan titik awal dan akhir tindakan tersebut. Penanda ini disebut bingkai kunci dan digunakan sebagai titik jangkar untuk tindakan di semua jenis program animasi yang berbeda, termasuk Adobe After Effects, Animate, dan Animator Karakter .

Bagaimana Anda menggunakan keyframes dalam animasi?

Untuk menggunakan keyframe, buat aturan @keyframes dengan nama yang kemudian digunakan oleh properti animation-name untuk mencocokkan animasi dengan deklarasi keyframe.

Apa itu animasi CSS Bagaimana cara kerjanya?

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.