How to Make Square and Swingging Effect for Image

Mengasah kembali skill CSS3 atribut -keyframes. Sudah tentu di sini kita akan bermain juga dengan atribut -animation, -transform dan image ;)) Dengan ketiga bahan dasar tersebut, AA Koben sekarang mau berbagi tutorial swinging keyframe animation & square keyframe animation! Efek swinging alias ayunan, yaitu membuat gambar bergerak ke kiri-kanan. Efek square membuat gambar bergerak-gerak di dalam area persegi. Begitulah penjelasan secara singkatnya :p Pertama-tama yuk membikin swinging effect for image.

Swinging keyframe animation

.swing {
transform-origin:50% 0;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
animation:swinging 10s ease-in-out 0s infinite;
-moz-animation:swinging 10s ease-in-out 0s infinite;
-webkit-animation:swinging 10s ease-in-out 0s infinite;
}
@-webkit-keyframes swinging {
0% { -webkit-transform: rotate(0);}
5% {-webkit-transform: rotate(10deg);}
10% {-webkit-transform: rotate(-9deg);}
15% {-webkit-transform: rotate(8deg);}
20% {-webkit-transform: rotate(-7deg);}
25% {-webkit-transform: rotate(6deg);}
30% {-webkit-transform: rotate(-5deg);}
35% {-webkit-transform: rotate(4deg);}
40% {-webkit-transform: rotate(-3deg);}
45% {-webkit-transform: rotate(2deg);}
50% {-webkit-transform: rotate(0);}
100% {-webkit-transform: rotate(0);}
}
@-moz-keyframes swinging {
0% {-moz-transform: rotate(0);}
5% {-moz-transform: rotate(10deg);}
10% {-moz-transform: rotate(-9deg);}
15% {-moz-transform: rotate(8deg);}
20% {-moz-transform: rotate(-7deg);}
25% {-moz-transform: rotate(6deg);}
30% {-moz-transform: rotate(-5deg);}
35% {-moz-transform: rotate(4deg);}
40% {-moz-transform: rotate(-3deg);}
45% {-moz-transform: rotate(2deg);}
50% {-moz-transform: rotate(0);}
100% {-moz-transform: rotate(0);}
}
@keyframes swinging {
0% {transform: rotate(0);}
5% {transform: rotate(10deg);}
10% {transform: rotate(-9deg);}
15% {transform: rotate(8deg);}
20% {transform: rotate(-7deg);}
25% {transform: rotate(6deg);}
30% {transform: rotate(-5deg);}
35% {transform: rotate(4deg);}
40% {transform: rotate(-3deg);}
45% {transform: rotate(2deg);}
50% {transform: rotate(0);}
100% {transform: rotate(0);}
}

Markup HTML<img class="swing" src="http://YOUR-LINK-IMAGE" />

      

Gambar akan bergoyang terus dengan jeda waktu 5 detik. Untuk memberikan jeda agar berlainan swingingnya, maka pada penulisan markup html tambahkan variasi style=" "<img class="swing" src="http://YOUR-LINK-IMAGE"
style="animation-delay: 0.8s;-webkit-animation-delay: 0.8s;-moz-animation-delay: 0.8s;animation-delay: 0.8s;" />

Square keyframe animation

.tmd {
width: XXXpx;
height: XXXpx;
background-image: url('http://YOUR-LINK-IMAGE');
background-repeat: no-repeat;
background-size: 200% 200%;
background-position: 100% 100%;
-webkit-animation: square 4s linear infinite;
-ms-animation: square 4s linear infinite;
animation: square 4s linear infinite;
}
.tmd:hover {
background-size: 100% 100%;
background-position: 100% 100%;
-webkit-animation: square 0s linear infinite;
-ms-animation: square 0s linear infinite;
animation: square 0s linear infinite;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
@-webkit-keyframes square {
0% {background-position: 0 0;}
25% {background-position: 100% 0;}
50% {background-position: 100% 100%;}
75% {background-position: 0 100%;}
100% {background-position: 0 0;}
}
@-ms-keyframes square {
0% {background-position: 0 0;}
25% {background-position: 100% 0;}
50% {background-position: 100% 100%;}
75% {background-position: 0 100%;}
100% {background-position: 0 0;}
}
@keyframes square {
0% {background-position: 0 0;}
25% {background-position: 100% 0;}
50% {background-position: 100% 100%;}
75% {background-position: 0 100%;}
100% {background-position: 0 0;}
}

Planning HTML<div class="tmd"></div>

Gantikan link url image, aturlah tinggi and lebar sesuai dengan kebutuhan. Resource by:
www.dynamicdrive.com/style/csslibrary/item/swinging_keyframe_animation
codepen.io/dalgard/pen/Iarcl
Di page dynamic drive css library ada update tutorial seputaran CSS3 keren, tengok sana ;)
Happy blogging \m/