Selamat malam sahabat. Jangan pernah berhenti untuk menemukan sesuatu hal keren baru. Kali ini kita akan membahas bagaimana web ataupun aplikasi yang kita tulis dengan skrip CSS memiliki suatu animasi. Tentu hal itu membuat web atau aplikasi kita semakin keren. Bagi yang sudah mahir dengan CSS kalem aja yak hehe atau kasi pencerahan (di komen) yang lebih mantep juga lebih baik :)
Di sini kita akan memanfaatkan rule dari CSS yakni @keyframe untuk membuat suatu objek menjadi animasi.
Beginilah bentuk syntax dasarnya:
@-webkit-keyframes: nama keyframe{from|persentase|to{rule css di sini}}*warna hijau di atas diisi sesuai kebutuhan.
Perlu kamu ketahui from adalah simbol 0%, jadi di sini adalah awal dari animasi/keyframe kita. Dan to adalah simbol 100%, jadi di sini lah final dari animasi/keyframe kita.
Oke sekarang kita coba terapkan bentuk syntax dasar tersebut ke dalam syntax CSS kita.
@-webkit-keyframes kulitips-css-animasi {from {left:50px; top 0; opacity:0.15}
50% {left:200px; top:0; opacity:0.5;}
to {left: 200px; top:90px; opacity:1;}
}
Jadi dari skrip yang baru saja kita buat di atas menerangkan bahwa keyframe kita dimulai pada selector from dengan rule di dalam tanda {}, kemudian keyframe berjalan dari 0% ke selector 50%, ke lima puluh persen tersebut maka posisi dan bentuk objek berubah ke rule selector 50% tersebut pula, dan begitu pula selanjutnya ke selector to, yakni 100%.
Sampai di sini kita telah berhasil membuat keyframes untuk animasi kita. Selanjutnya kita menjalankan keyframe-keyframe tersebut menjadi suatu animasi yang kita inginkan, menggunakan skrip berikut.
#kulitipsIdAnimasi {-webkit-animation: kulitips-css-animasi 3s ease-out 0 infinite alternate;
position:absolute;
height: 100px;
width: 100px;
background-color:#6600FF;
color:#CCCCCC;
text-align:center;
border-radius: 12px;
}
#kulitipsIdAnimasi adalah nama id pada tag html.
properti -webkit-animation menjelaskan (dari kiri ke kanan): nama animasi (harus sama dengan nama keyframe), durasi animasi, timing fungsi, penundaan, penghitungan iterasi, direksi animasi.
Supaya lebih kelihatan hasilnya kita masukkan skrip CSS di atas ke dalam html. Berikut ini adalah final skrip kita:
<!DOCTYPE html><html>
<head>
<title>KULITIPS CSS Animasi</title>
<style type="text/css">
@-webkit-keyframes kulitips-css-animasi {
from {left:50px; top:0; opacity:0.15}
50% {left:200px; top:0; opacity:0.5;}
to {left: 200px; top:90px; opacity:1;}
}
#kulitipsIdAnimasi {
-webkit-animation: kulitips-css-animasi 3s ease-out 0 infinite alternate;
-webkit-animation-name: kulitips-css-animasi;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
position:absolute;
height: 100px;
width: 100px;
background-color:#6600FF;
color:#CCCCCC;
text-align:center;
border-radius: 12px;
}
</style>
</head>
<body>
<div id="kulitipsIdAnimasi">KULITIPS CSS ANIMASI!!</div>
</body>
</html>
Perlu kamu ketahui juga skrip CSS yang kita buat di atas kompatibel untuk IE 5.5 ke atas atau Microsoft Edge. Tulisan warna biru pada skrip tersebut sengaja saya tambahkan agar kompatibel juga di Google Chrome.
Download source kode di sini.
0 komentar:
Post a Comment