while using css animation dosent have any affect on my div - html

Question

I tried to use animated loader but unable to rotate as key frames are not working
i {
height: 2em;
width: 2em;enter code here
border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: spin 2s ease infinite;
}
i:before,
i:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: spin 2s ease infinite;
-webkit-animation: spin 2s ease infinite;
-moz-animation: spin 2s ease infinite;
}
i:before {
left: -2.3em;
}
i:after {
left: 2.3em;
}
#-moz-keyframes spin {
0% {
top: 0;
-moz-transform: rotate(0deg);
}
50% {
top: -4em;
-moz-transform: rotate(-180deg);
}
100% {
top: 0;
-moz-transform: rotate(-360deg);
}
}
#-webkit-keyframes spin {
0% {
top: 0;
-webkit-transform: rotate(0deg);
}
50% {
top: -4em;
-webkit-transform: rotate(-180deg);
}
100% {
top: 0;
-webkit-transform: rotate(-360deg);
}
}
#keyframes spin {
0% {
top: 0;
transform: rotate(0deg);
}
50% {
top: -4em;
transform: rotate(-180deg);
}
100% {
top: 0;
transform: rotate(-360deg);
}
}

Answer 1

I think u need to add a "." before "i", if "i" is your div class name
→ CodePen Example with your code working
-HTML
<div class="i">ANIMATION</div>
-CSS
.i {
height: 2em;
width: 2em;
enter code here border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: spin 2s ease infinite;
}
.i:before, i:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: spin 2s ease infinite;
-webkit-animation: spin 2s ease infinite;
-moz-animation: spin 2s ease infinite;
}
.i:before {
left: -2.3em;
}
.i:after {
left: 2.3em;
}
#-moz-keyframes spin {
0% {
top: 0;
-moz-transform: rotate(0deg);
}
50% {
top: -4em;
-moz-transform: rotate(-180deg);
}
100% {
top: 0;
-moz-transform: rotate(-360deg);
}
}
#-webkit-keyframes spin {
0% {
top: 0;
-webkit-transform: rotate(0deg);
}
50% {
top: -4em;
-webkit-transform: rotate(-180deg);
}
100% {
top: 0;
-webkit-transform: rotate(-360deg);
}
}
#keyframes spin {
0% {
top: 0;
transform: rotate(0deg);
}
50% {
top: -4em;
transform: rotate(-180deg);
}
100% {
top: 0;
transform: rotate(-360deg);
}
}
Greetings!

Answer 2

Spin class was causing the issue so I changed the class name. Now working perfectly fine.
.loader {
height: 10px;
width: 10px;
border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: example 2s ease infinite;
margin-top: 25%;
}
.loader:before,
.loader:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: example 2s ease infinite;
}
.loader:before {
left: -1.2em;
}
.loader:after {
left: 1.2em;
}
#keyframes example {
0% {
transform: rotate(0deg);
top: 0;
}
50% {
transform: rotate(-180deg);
top: -2em;
}
100% {
transform: rotate(-360deg);
top: 0;
}
}