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>

\\\*

css javascript sharing

@coding4fun

27 Kontribusi 23 Poin

Diperbarui 6 tahun yang lalu

2 Jawaban:

keren

@pemudakoding

342 Kontribusi 120 Poin

Dipost 7 tahun yang lalu

Boleh boleh.. tapi masih blom tau mau dipake buat apa ini animasi

@kebeng

1 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

TUTORIAL - CSS: Mengenal Animasi pada CSS 3 (bag. 2)

Kelas Premium!
Belajar bikin website dari nol sekarang