Cara membuat animasi pada CSS3

belajar css

CSS3 animasi

Pada CSS3 terdapat fitur baru yaitu property animation. Animasi CSS3 selangkah lebih maju karena terdapat keyframe yang memungkinkan Anda untuk menentukan perubahan pada property CSS dengan seiring waktu. Anda harus menentukan setidaknya dua property animation-name dan animation-duration (lebih besar dari 0), untuk membuat animasi terjadi.

Menentukan @keyframes

@keyframe digunakan untuk menentukan nilai property untuk animasi itu sendiri secara bertahap, dan akan berubah dari gaya saat ini ke gaya baru pada waktu tertentu. Anda bisa memilih keyframe yang dimulai dengan persentase (%), kata kunci from (sama dengan 0%) atau to (sama dengan 100%).

Persentase mewakili persen durasi untuk animasi, yang berarti:

  • 0% mewakili titik awal animasi
  • 100% mewakili titik akhir
  • 50% mewakili titik tengah dan seterusnya

Contoh:

Editor Online
  1. @keyframes {
  2. from {background-color: blue;}
  3. to {background-color: yellow;}
  4. }

Pada contoh diatas Animasi belum berjalan, kita akan perbaiki pada contoh-contoh berikutnya.

Anda harus menentukan setidaknya dua property animation-name dan animation-duration untuk membuat animasi terjadi.

Animation-name

Property animation-name digunakan untuk membuat nama animasi itu sendiri yang akan dikaitkan pada @keyframes. Pada contoh dibawah ini kita menggunakan nama animasi berubah lalu kita kaitkan pada @keyframes. Namanya bebas asal diawali dengan huruf dan jangan menggunakan simbol-simbol yang sulit dibaca.

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. }
  4. @keyframes berubah {
  5. from {background-color: blue;}
  6. to {background-color: yellow;}
  7. }

Pada contoh diatas Animasi belum berjalan, kita akan perbaiki pada contoh berikutnya.

Anda harus menentukan setidaknya dua property animation-name dan animation-duration untuk membuat animasi terjadi.

Animation-duration

Property animation-duration digunakan untuk memberikan durasi pada animasi. Sebagai contoh jika Anda memberikan durasi 3s (s yang berarti second) itu berarti Anda memberikan durasi 3detik, atau jika Anda memberikan durasi 2.5s itu berarti Anda memberikan durasi 2,5 detik.

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. }
  5. @keyframes berubah {
  6. from {background-color: blue;}
  7. to {background-color: yellow;}
  8. }

Pada contoh diatas Anda menggunakan animasi dengan kata kunci from (sama dengan 0%) atau to (sama dengan 100%). Dan Anda bisa menghasilkan animasi yang lebih spesifik pada setiap perubahan dengan patokan persentase (%).

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. }
  5. @keyframes berubah {
  6. 0% {background-color: blue;}
  7. 25% {background-color: red;}
  8. 50% {background-color: yellow;}
  9. 75% {background-color: green;}
  10. 100% {background-color: blue;}
  11. }

Animation-delay

Property animation-delay digunakan untuk menunda waktu animasi yang akan diputar dengan waktu yang akan ditentukan.

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. animation-delay: 2s;
  5. }
  6. @keyframes berubah {
  7. 0% {background-color: blue; left:0px; top:0px;}
  8. 25% {background-color: red; left:200px; top:0px;}
  9. 50% {background-color: yellow; left:200px; top:200px;}
  10. 75% {background-color: green; left:0px; top:200px;}
  11. 100% {background-color: blue; left:0px; top:0px;}
  12. }

Nilai negatif juga diperbolehkan. Jika menggunakan nilai negatif, animasi akan mulai seolah-olah sudah diputar selama N detik. Pada contoh berikut, animasi akan mulai seolah-olah sudah diputar selama 2 detik:

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. animation-delay: -2s;
  5. }
  6. @keyframes berubah {
  7. 0% {background-color: blue; left:0px; top:0px;}
  8. 25% {background-color: red; left:200px; top:0px;}
  9. 50% {background-color: yellow; left:200px; top:200px;}
  10. 75% {background-color: green; left:0px; top:200px;}
  11. 100% {background-color: blue; left:0px; top:0px;}
  12. }

Animation-iteration-count

Property animation-iteration-count digunakan untuk menentukan berapa kali animasi harus dijalankan.

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. animation-iteration-count: 3;
  5. }
  6. @keyframes berubah {
  7. 0% {background-color: blue; left:0px; top:0px;}
  8. 25% {background-color: red; left:200px; top:0px;}
  9. 50% {background-color: yellow; left:200px; top:200px;}
  10. 75% {background-color: green; left:0px; top:200px;}
  11. 100% {background-color: blue; left:0px; top:0px;}
  12. }

Anda juga bisa membuat sebuah animasi berjalan tak terbatas atau infinite. Berikut contohnya:

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. animation-iteration-count: infinite;
  5. }
  6. @keyframes berubah {
  7. 0% {background-color: blue; left:0px; top:0px;}
  8. 25% {background-color: red; left:200px; top:0px;}
  9. 50% {background-color: yellow; left:200px; top:200px;}
  10. 75% {background-color: green; left:0px; top:200px;}
  11. 100% {background-color: blue; left:0px; top:0px;}
  12. }

Animation-direction

Property animation-direction digunakan untuk mengatur apakah arah animasi harus diputar ke depan, belakang atau dalam siklus alternatif.

Property arah animasi dapat memiliki nilai berikut:

  • normal Animasi diputar seperti biasa (ke depan). Ini standar
  • reverse  Animasi diputar dalam arah terbalik (mundur)
  • alternate  Animasi diputar terlebih dahulu, lalu mundur
  • alternate-reverse  Animasi diputar mundur lebih dulu, lalu maju

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. animation-direction: reverse;
  5. }
  6. @keyframes berubah {
  7. 0% {background-color: blue; left:0px; top:0px;}
  8. 25% {background-color: red; left:200px; top:0px;}
  9. 50% {background-color: yellow; left:200px; top:200px;}
  10. 75% {background-color: green; left:0px; top:200px;}
  11. 100% {background-color: blue; left:0px; top:0px;}
  12. }

Anda juga bisa menggunakan nilai alternate untuk membuat animasi diputar ke depan, lalu mundur. Berikut contohnya:

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. animation-iteration-count: 2;
  5. animation-direction: alternate;
  6. }
  7. @keyframes berubah {
  8. 0% {background-color: blue; left:0px; top:0px;}
  9. 25% {background-color: red; left:200px; top:0px;}
  10. 50% {background-color: yellow; left:200px; top:200px;}
  11. 75% {background-color: green; left:0px; top:200px;}
  12. 100% {background-color: blue; left:0px; top:0px;}
  13. }

Anda juga bisa menggunakan nilai alternate-reverse untuk membuat animasi diputar mundur terlebih dahulu, lalu maju ke depan. Berikut contohnya:

Contoh:

Editor Online
  1. #box {
  2. animation-name: berubah;
  3. animation-duration: 3s;
  4. animation-iteration-count: 2;
  5. animation-direction: alternate-reverse;
  6. }
  7. @keyframes berubah {
  8. 0% {background-color: blue; left:0px; top:0px;}
  9. 25% {background-color: red; left:200px; top:0px;}
  10. 50% {background-color: yellow; left:200px; top:200px;}
  11. 75% {background-color: green; left:0px; top:200px;}
  12. 100% {background-color: blue; left:0px; top:0px;}
  13. }

Animation-timing-function

Property animation-timing-function digunakan untuk menentukan kurva kecepatan pada sebuah animasi.

Nilai untuk property animation-timing-function dapat memiliki nilai-nilai berikut:

  • ease Menentukan animasi dengan awal yang lambat, lalu cepat, lalu akhiri perlahan (ini default)
  • linear Menentukan animasi dengan kecepatan yang sama dari awal hingga akhir
  • ease-in Menentukan animasi dengan awal yang lambat
  • ease-out Menentukan animasi dengan akhir yang lambat
  • ease-in-out Menentukan animasi dengan awal dan akhir yang lambat
  • cubic-bezier(n,n,n,n) Memungkinkan Anda menentukan nilai Anda sendiri dalam fungsi kubik-bezier

Contoh:

Editor Online
  1. div {
  2. animation-name: bergerak;
  3. animation-duration: 5s;
  4. animation-iteration-count: infinite;
  5. }
  6. @keyframes bergerak {
  7. from {left: 0px;}
  8. to {left: 300px;}
  9. }
  10. #linear {animation-timing-function: linear;}
  11. #ease {animation-timing-function: ease;}
  12. #ease-in {animation-timing-function: ease-in;}
  13. #ease-out {animation-timing-function: ease-out;}
  14. #ease-in-out {animation-timing-function: ease-in-out;}

Animation-fill-mode

Animasi CSS tidak memengaruhi suatu elemen sebelum keyframe pertama dimainkan atau setelah keyframe terakhir dimainkan. Property animation-fill-mode dapat mengesampingkan perilaku ini.

Property animation-fill-mode menentukan gaya untuk elemen target ketika animasi tidak bermain (sebelum dimulai, setelah itu berakhir, atau keduanya). Property animation-fill-mode dapat memiliki nilai-nilai berikut:

  • none Nilai standar. Animasi tidak akan menerapkan gaya apa pun pada elemen sebelum atau setelah dijalankan
  • forwards  Elemen akan mempertahankan nilai style yang diatur oleh keyframe terakhir (tergantung pada animation-direction dan animation-iteration-count)
  • backwards  Elemen akan mendapatkan nilai gaya yang diatur oleh keyframe pertama (tergantung pada animation-direction), dan mempertahankan ini selama periode penundaan animasi atau animation-delay
  • both  Animasi akan mengikuti aturan untuk maju dan mundur, memperluas property animasi di kedua arah

Contoh:

Editor Online
  1. #box {
  2. animation-name: bergerak;
  3. animation-duration: 3s;
  4. animation-fill-mode: forwards;
  5. }
  6. @keyframes bergerak {
  7. from {left: 0px;}
  8. to {left: 200px; background-color: red;}
  9. }

Pada contoh dibawah ini sebuah id box mendapatkan nilai gaya yang ditetapkan oleh keyframe pertama sebelum animasi dimulai (selama periode penundaan animasi):

Contoh:

Editor Online
  1. #box {
  2. animation-name: bergerak;
  3. animation-duration: 3s;
  4. animation-delay: 2s;
  5. animation-fill-mode: backwards;
  6. }
  7. @keyframes bergerak {
  8. from {left: 0px;}
  9. to {left: 200px; background-color: red;}
  10. }

Pada contoh dibawah ini sebuah id box mendapatkan nilai gaya yang ditetapkan oleh keyframe pertama sebelum animasi dimulai, dan mempertahanlan nilai gaya dari keyframe terakhir ketika animasi selesai:

Contoh:

Editor Online
  1. #box {
  2. animation-name: bergerak;
  3. animation-duration: 3s;
  4. animation-delay: 2s;
  5. animation-fill-mode: both;
  6. }
  7. @keyframes bergerak {
  8. from {left: 0px; background-color: orange;}
  9. to {left: 200px; background-color: red;}
  10. }

Animation shorthand

Dengan animation shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua property animation-* dalam satu property tunggal. Untuk menggunakan animation-* shorthand Anda cukup menggunakan property animation. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti contoh-contoh diatas.

Property animation-* shorthand berlaku untuk animation-* dibawah ini:

  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode

Urutan penulisan syntax:

animation: animation-name / animation-duration / animation-timing-function / animation-delay / animation-iteration-count / animation-direction / animation-fill-mode;

Contoh:

Editor Online
  1. #box {
  2. animation: bergerak 5s linear 2s infinite alternate;
  3. }
  4. @keyframes bergerak {
  5. 0% {background-color: blue; left:0px; top:0px;}
  6. 25% {background-color: red; left:200px; top:0px;}
  7. 50% {background-color: yellow; left:200px; top:200px;}
  8. 75% {background-color: green; left:0px; top:200px;}
  9. 100% {background-color: blue; left:0px; top:0px;}
  10. }

Daftar property CSS3 animation

PropertyKegunaanya
@keyframesMenentukan kerangka animasi
animationMenentukan singkatan untuk mengatur semua property animasi
animation-delayMenentukan penundaan untuk dimulainya animasi
animation-directionMenentukan apakah animasi harus diputar maju, mundur atau dalam siklus alternatif
animation-durationMenentukan berapa lama waktu animasi yang diperlukan untuk menyelesaikan satu siklus
animation-fill-modeMenentukan gaya untuk elemen saat animasi tidak diputar (sebelum dimulai, setelah berakhir, atau keduanya)
animation-iteration-countMenentukan berapa kali animasi harus dimainkan
animation-nameMenentukan nama animasi pada @keyframes
animation-play-stateMenentukan apakah animasi sedang berjalan atau dihentikan sementara
animation-timing-functionMenentukan kurva kecepatan animasi

Leave a Reply

Your email address will not be published. Required fields are marked *