CSS animation delay not triggering - css

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>

Answer 1

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>

Answer 2

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>

Answer 3

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>