CODEWITHSUNDEEP
htmlcssanimation
Patry
Patry

Reputation: 13

Animation with a delay

I have animation:

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#animation1 {
  height: 100px;
  width: 100px;
  background: pink;
  opacity: 0;
  -webkit-animation: fadein 2s ease-in alternate;
  -moz-animation: fadein 2s ease-in alternate;
  animation: fadein 2s ease-in alternate;
  animation-delay: 2s;
}
<div id="animation1"></div>

I would like to have a hidden element by 2 seconds and show it, but this element disappears after animation. When I remove opacity 0, element is visable earlier than it should. How to do it?

Upvotes: 1

Views: 36

Answers (1)

doğukan
doğukan

Reputation: 27381

You can use animation-fill-mode: forwards

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#animation1 {
  height: 100px;
  width: 100px;
  background: pink;
  opacity: 0;
  -webkit-animation: fadein 2s ease-in alternate;
  -moz-animation: fadein 2s ease-in alternate;
  animation: fadein 2s ease-in alternate;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
<div id="animation1"></div>

Upvotes: 1

Related Questions