Membuat Animation Web Paling Mudah
CSS Animation Paling Mudah
Tech Antuzia - animasi CSS adalah @keyframes, aturan CSS di mana sebuah animasi didefinisikan. Bayangkan @keyframes sebagai tahapan-tahapan yang merangkai timeline pada animasi. Di dalam @keyframes, anda dapat menentukan tahapan ini, dengan masing-masing memiliki sebuah style yang berbeda.
Selanjutnya, agar animasi berjalan, anda perlu mengaitkan @keyframes tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam @keyframes dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan.
Pada kali ini saya akan membahas tentang bagaimana cara membuat animation paling mudah.inilah program animation nya:
Selanjutnya, agar animasi berjalan, anda perlu mengaitkan @keyframes tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam @keyframes dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan.
Pada kali ini saya akan membahas tentang bagaimana cara membuat animation paling mudah.inilah program animation nya:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>
Dari program diatas akan menggeluarkan hasi yang memuaskan seperti bentuk kotak yang akan berubah ubah warna dengan sendirinya
0 Response to "Cara Membuat Animasi CSS di HTML. Contoh saja"
Posting Komentar