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

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);
  }
}

CodePudding user response：

I think u need to add a "." before "i", if "i" is your div class name

→ CodePen Example with your code working

-HTML

<div >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!

CodePudding user response：

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;
  }
}