TtarwaraMar 18, 2019
I want to display an image as a loader with rotating animation. code is below:
#myImg {
-moz-animation: spinHorizontal 1.8s infinite linear;
-o-animation: spinHorizontal 1.8s infinite linear;
-webkit-animation: spinHorizontal 1.8s infinite linear;
animation: spinHorizontal 1.8s infinite linear;
}
@-moz-keyframes spinHorizontal {
0% {
-moz-transform: rotateY(0deg);
}
100% {
-moz-transform: rotateY(360deg);
}
}
@keyframes spinHorizontal {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@-ms-keyframes spinHorizontal {
0% {
-ms-transform: rotateY(0deg);
}
100% {
-ms-transform: rotateY(360deg);
}
}
@-o-keyframes spinHorizontal {
0% {
-o-transform: rotateY(0deg);
}
100% {
-o-transform: rotateY(360deg);
}
}
@-webkit-keyframes spinHorizontal {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
How can I achieve it with gif image. I used this:
<body class="stretched" data-loader-html='
<div class="css3-spinner-bounce1"></div><div class="css3-spinner-bounce2"></div><div class="css3-spinner-bounce3"></div>'>
But it does not solve my purpose of smoothh rotating animation.