#translasi1{
	transition: transform 1.5s; /* Durasi Animasi bergerak ke kanan*/
}
#translasi1:hover{
	transform: translatex(10%);
}

#translasi2{
	transition: transform 1.5s;  /*Durasi Animasi bergerak ke kiri*/
}
#translasi2:hover{
	transform: translatex(-10%);
}

#translasi3{
	transition: transform 1.5s; /* Durasi Animasi bergerak ke bawah karena pake fisika searah gravitasi*/
}
#translasi3:hover{
	transform: translatey(10%);
}

#translasi4{
	transition: transform 1.5s; /* Durasi Animasi bergerak ke atas hukum fisika*/
}
#translasi4:hover{
	transform: translatey(-10%);
}


#rotasi1{
	transition: transform 3s; /* Durasi Animasi berputar ke atas */
}
#rotasi1:hover{
	transform: rotatex(360deg);
}

#rotasi2{
	transition: transform 3s; /* Durasi Animasi berputar ke bawah */
}
#rotasi2:hover{
	transform: rotatex(-360deg);
}

#rotasi3{
	transition: transform 3s; /* Durasi Animasi berputar ke kanan */
}
#rotasi3:hover{
	transform: rotatey(360deg);
}

#rotasi4{
	transition: transform 3s; /* Durasi Animasi berputar ke kiri */
}
#rotasi4:hover{
	transform: rotatey(-360deg);
}


#rotasi5{
	transition: transform 3s; /* Durasi Animasi berputar searah jarum jam */
}
#rotasi5:hover{
	transform: rotate(360deg);
}


#rotasi6{
	transition: transform 3s; /* Durasi Animasi diperbesar kesamping */
}
#rotasi6:hover{
	transform: rotate(-360deg);
}

#dilatasi1{
	transition: transform 3s; /* Durasi Animasi diperbesar kesamping */
}
#dilatasi1:hover{
	transform: scaleX(1.2);
}


#dilatasi2{
	transition: transform 3s; /* Durasi Animasi diperkecil atas bawah */
}
#dilatasi2:hover{
	transform: scaleX(0.8);
}

#dilatasi3{
	transition: transform 3s; /* Durasi Animasi diperbesar atas bawah */
}
#dilatasi3:hover{
	transform: scaleY(1.2);
}

#dilatasi4{
	transition: transform 3s;  /* Durasi Animasi diperkecil atas bawah */
}
#dilatasi4:hover{
	transform: scaleY(0.8);
}


#dilatasi5{
	transition: transform 3s;
}
#dilatasi5:hover{
	transform: scale(1.2);
}

#dilatasi6{
	transition: transform 3s; /* Durasi Animasi diperkecil ke semua arah */
}
#dilatasi6:hover{
	transform: scale(0.8);
}


/*ANIMASI PERUBAHAAN WARNA*/
.kecerahan{
	-webkit-filter: opacity(100%);
}
.kecerahan:hover{
	-webkit-filter: opacity(50%);
}


.hitamputih{
	-webkit-filter: grayscale(0%);
}
.hitamputih:hover{
	-webkit-filter: grayscale(100%);
}


.sepia{
	-webkit-filter: sepia(100%);
}
.sepia:hover{
	-webkit-filter: sepia(0%);
}



.kotak{
	position:relative;
	padding-bottom: 15%;
	
}

#pertama,#kedua,#ketiga{
	position: absolute; top:0; left:0;
	opacity: 0;
	/*durasi animasi gambar pertama sampai terakhir berulang ulang*/
	animation: hilang 15s infinite;
}

@keyframes hilang
{
0%{opacity:0; transform: translatex(100%);}
33%{opacity:1; transform: translatex(0%);}
66%{opacity:0; transform: translatex(-100%);}
}

#pertama{animation-delay: 0s;}
#kedua{animation-delay: 5s;}
#ketiga{animation-delay: 10s;}