Hai teman-teman? apa kabar? semoga baik, didalam css telah banyak sekali propertis-propertis baru yang dapat kita gunakan untuk mempercantik tampilan website kita, terlebih sekarang dengan hadirnya CSS3 yang dimana kita dapat membuat animasi sederhana dengan CSS3 ini, kali ini kita akan belajar tentang membuat animasi, tepatnya kita akan belajar tentang propertis animation-play-state pada css.
Funngsi dari animation-play-state pada css ini kita dapat mengatur berjalan atau tidaknya animasi yang kita buat, mungkin untuk lebih jelasnya kita langsung saja praktek, pertama teman-teman silahkan buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <style> div { width: 50px; height: 50px; background: blue; position: relative; -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */ -webkit-animation-play-state: play; /* Safari 4.0 - 8.0 */ animation: mymove 5s; animation-play-state: play; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove { from {left: 0px;} to {left: 200px;} } @keyframes mymove { from {left: 0px;} to {left: 200px;} } </style> </head> <body> <div></div> </body> </html> |
Jika teman-teman jalankan maka kotak biru yang kita buat dengan element div dapat berjalan karena kita mengatur propertis
|
1 |
animation-play-state: play; |
Dengan nilai play, yang artinya animasi yang kita buat akan berjalan secara otomatis, namun sekarang coba teman-teman ubah nilainya menjadi stop, jadi seperti ini :
|
1 |
animation-play-state: stop; |
Maka animasi yang kita buat tidak akan berjalan, karna nilai stop yang kita berikan itu,
Oke teman-teman, giman? cukup mudah bukan? saya kira untuk tutorial kali ini tentang belajar tentang propertis animation-play-state pada css cukup sampai disini dulu, semoga tutorial yang singkat kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,
Terima kasih