CSS animation delay not triggering

Question

Just curious to know why this simple animation delay wont seem to work. I just want a delay of 7s before the fade in of the element. Very simple im sure but been looking at it for to long now.

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  animation: fadein 2s linear;
  -webkit-animation: fadein 2s linear;
 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class= "box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

Ionut Necula · Accepted Answer · 2017-01-10 21:59:44Z

2

Put the animation delay after the animation, because the delay needs to be attached to the animation in question(the order is important):

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  -webkit-animation: fadein 2s linear;
   animation: fadein 2s linear; 
  -webkit-animation-delay: 7s;
   animation-delay: 7s;
 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

Or using a shorthand way, remove animation-delay: 7s; and -webkit-animation-delay: 7s; and add the delay time to the animation properties like this:

-webkit-animation:fadein 2s linear 7s;
 animation:fadein 2s linear 7s;

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
  background: red;
  color: black;
  text-align: center;
  -webkit-animation: fadein 2s linear 7s;
  animation: fadein 2s linear 7s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

edited Jan 10, 2017 at 21:59

answered Jan 10, 2017 at 21:48

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rufus Over a year ago

Thanks for this mate much appreciated

Brett DeWoody · Accepted Answer · 2017-01-10 21:53:16Z

Try using the long-form animation properties:

animation-delay
animation-name
animation-duration
animation-timing-function

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  opacity: 0;
  -webkit-animation-delay: 7s;
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 2s; 
  -webkit-animation-timing-function: linear;
  animation-delay: 7s;
  animation-name: fadein; 
  animation-duration: 2s;
  animation-timing-function: linear;
 
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class= "box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

xfactor11 · Accepted Answer · 2017-01-10 22:10:50Z

This code below works I set the initial opacity of the box to 0 so it "fades in" also the animation delay property seems to work only if you state it after the animation itself. I also added animation-fill-mode: forwards; to keep the box being displayed after the animation.

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  animation: fadein 2s linear;
  -webkit-animation: fadein 2s linear;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  opacity: 0;
 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class= "box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

Collectives™ on Stack Overflow

CSS animation delay not triggering

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related