Animation Delay not working

HTML & CSS
1

Hi, I have an h2 heading which I’ve split into two spans. I want the first span to fade in, then the second part to fade in after. I’ve set up CSS animations but the second part isn’t being delayed - it fades in right away. What could I be doing wrong? Thanks.

#tagline #tag1 {
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */
}

#tagline #tag2 {
	animation-delay:-10s;
	-webkit-animation-delay:-10s; /* Safari and Chrome */
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
2

Hi,

The animation property is a shorthand so you are over-riding the delay as soon as you have set it. Move the longhand rules to the end or include them in the shorthand.


#tagline #tag2 {
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */
	animation-delay:-10s;
	-webkit-animation-delay:-10s; /* Safari and Chrome */
}

Or this:


#tagline #tag2 {
    animation:fadein -10s 4s;
    -moz-animation:fadein -10s 4s; /* Firefox */
    -webkit-animation:fadein -10s 4s; /* Safari and Chrome */
    -o-animation: fadein -10s 4s; /* Opera */
}
3

Thanks Paul!

I’ve been experimenting with it and realised a delay wasn’t going to work, because it was showing #tag2 before the animatiopn started, then made it disappear and fade in after the delay.

So I ended up playing around with the timing and timing-function.

#tagline #tag1 {
    animation: fadein 3s ease-in;
    -moz-animation: fadein 3s ease-in; /* Firefox */
    -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in; /* Opera */
}

#tagline #tag2 {
    animation: fadein 6s ease-in-out;
    -moz-animation: fadein 6s ease-in-out; /* Firefox */
    -webkit-animation: fadein 6s ease-in-out; /* Safari and Chrome */
    -o-animation: fadein 6s ease-in-out; /* Opera */
}