Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
TUTORIAL - CSS: Mengenal Animasi pada CSS 3 (bag. 2)
Lanjutan dari TUTORIAL - CSS: Mengenal Animasi pada CSS 3 (bag. 1)
Properti ‘animation’ dari CSS dapat juga dioperasikan dalam Javascript. Hal ini dilakukan dengan menggunakan properti ‘style’ pada Javascript:
/* untuk Mozilla */
document.getElementById( “elemen” ).style.animation = “namaAnimasi 1s linear 2s infinite alternate forwards running”;
/* atau */
var elemen = document.getElementById( “elemen” );
elemen.style.animationName = “namaAnimasi”;
elemen.style.animationDuration = “1s”;
elemen.style.animationTimingFunction = “linear”;
elemen.style.animationdelay = “2s”;
elemen.style.animationIterationCount = “infinite”;
elemen.style.animationDirection = “alternate”;
elemen.style.animationFillMode = “forwards”;
elemen.style.animationPlayState = “running”;
/* untuk Chrome */
document.getElementById( “elemen” ).style.WebkitAnimation = “namaAnimasi 1s linear 2s infinite alternate forwards running”;
Contoh
Menjalankan dan menghentikan animasi CSS dengan Javascript (penjelasan pada bagian comment dalam code):
<!DOCTYPE html>
<html>
<head>
<style>
/* Untuk Mozilla */
@keyframes namaAnimasi {
0% { left:0px; top:0px; }
25% { left:50px; top:50px; }
50% { left:100px; top:0px; }
75% { left:150px; top:50px; }
100% { left:200px; top:0px; }
}
/* Untuk Chrome */
@-webkit-keyframes namaAnimasi {
0% { left:0px; top:0px; }
25% { left:50px; top:50px; }
50% { left:100px; top:0px; }
75% { left:150px; top:50px; }
100% { left:200px; top:0px; }
}
#elemen {
position: relative;
width: 50px;
height: 50px;
background-color: cornflowerblue;
border-radius: 100px 100px 100px 100px;
/* Untuk Mozilla */
animation-name: namaAnimasi;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: paused;
/* Untuk Chrome */
-webkit-animation-name: namaAnimasi;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div id="elemen" style="text-align:center; color:white;">X</div>
<br><br><br>
<input type="button" id="tombol" value="On/Off" onclick="OnOff()" />
<script>
var elemen = document.getElementById( "elemen" );
var tombol = document.getElementById( "tombol" );
var status = "off";
function OnOff (){
if ( status === "on" ){
// warna tulisan x menjadi putih jika animasi berhenti
elemen.style.color = "white";
// memberhentikan animasi
elemen.style.animationPlayState = "paused";
elemen.style.WebkitAnimationPlayState = "paused";
// indikator 'on-off' untuk animasi
status = "off";
} else if ( status === "off" ){
// warna tulisan x menjadi kuning jika animasi dijalankan
elemen.style.color = "yellow";
// menjalankan animasi
elemen.style.animationPlayState = "running";
elemen.style.WebkitAnimationPlayState = "running";
// indikator 'on-off' untuk animasi
status = "on";
}
}
</script>
</body>
</html>
\\\*
2
2 Jawaban:
Boleh boleh.. tapi masih blom tau mau dipake buat apa ini animasi
0
