Question 213686 in CSS Question posted in
Some basic documentation can be found here.

is it possible to delay fadeIn animation in css

I want to delay this fadein animation 5s

   .fade-in-image-2 { animation: fadeIn 5s 10s; }

is it possible?

Tags:

2

Answers


  1. 0

    You can set it directly on the CSS property animation, or decide to use the rule animation-delay.

    For example, if we wanna set 2 seconds of delay:

    animation: 3s linear 2s slidein;

    or

    animation-delay: 2s;

    Here’s some docs:
    https://developer.mozilla.org/en-US/docs/Web/CSS/animation
    https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

    Login or Signup to reply.
  2. 0

    The animation property is defined as follows:

    animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

    Depending on your code, I guess you want to use animation-name, animation-duration, and animation-delay.

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

#element {
  animation: fadeIn 5s 3s; /* animation-name, animation-duration, and animation-delay */
  /* lol, everything down is for illustration purposes only! */
  width: 200px;
  height: 200px;
  background-color: lightblue;
  text-align: center;
  vertical-align: middle;
  display: flex; 
  justify-content: center;
  align-items: center; 
  font-family: cursive;
  font-size:35px;
  border-radius: 5px;
  user-select: none;
}
    <div id="element">Hello!</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search