How to set an animation by using css in html file?

Admin 1
Viewed 34

I am developing one html page which contain css also inside that , i am setting three dots near to the content ,when i am adding keyframes to that it's not translating as per my requirement , please helpme to fix the issue ..

  <div class="footer-btm">
    Thanks for watching
    <div class="loading">
      <span></span>
      <span></span>
      <span></span>
    </div>
    </div>
<style>
.loading span{
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #ffd957;
  border-radius: 50%;
  display: inline-block;
  animation-name: dots;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.loading span:nth-child(2){
  background-color: #57ffa0;
  animation-delay: 0.4s;

}
.loading span:nth-child(3){
  background-color: #ff8b57;
  animation-delay: 0.8s;
}
@keyframes dots{
  50%{
    opacity: 0;
    transform: scale(0.7) translateY(10px);
  }
}
</style>

i am following this https://youtu.be/aglMDLGeXnc tutorial to develop this thing

css html
1 Answers

You've forgotten the animation-duration attribute:

  animation-name: dots;
  animation-duration: 2s;
  animation-iteration-count: infinite;

Add this, and the dots will appear/disappear properly.

user_34176170
Related