Panduan CSS3 mempelajari dan mempraktekkan materi Cara Membuat Animasi Sederhana dengan CSS3.
Panduan CSS3 mempelajari dan mempraktekkan materi Cara Membuat Animasi Sederhana dengan CSS3. Animasi adalah proses membuat perubahan bentuk dan menciptakan gerakan dengan unsur-unsur.
@keyframes
Keyframes akan mengontrol langkah-langkah animasi menengah dalam CSS3.
Contoj Key frame dengan Animasi Kiri
@keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px; background-color: red; animation-name: animation; animation-duration: 5s; }
Contoh di atas menunjukkan tinggi, lebar, warna, nama dan durasi animasi dengan sintaks keyframes
Memindah Animasi Ke Kiri
<html> <head> <style type="text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>this is an example of moving left animation .</p> <button onclick="myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
akan menghasilkan hasil sebagai berikut -
Memindah Animasi Kiri Dengan keyframes
<html> <head> <style type="text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>This is an example of animation left with an extra keyframe to make text changes.</p> <button onclick="myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
akan menghasilkan hasil sebagai berikut -
COMMENTS