CODEWITHSUNDEEP
csscss-animationskeyframe
Paranoia
Paranoia

Reputation: 2070

CSS3 keyframe animation including delay, toggled with JS

I'm trying to animate (fade-in) 3 buttons. This is my html:

<aside>
  <p><a href="#"><i class="icon-facebook"></i> Share</a></p>
  <p><a href="#"><i class="icon-twitter"></i> Tweet</a></p>
  <p><a href="#"><i class="icon-envelope"></i> Mail</a></p>
</aside>

and this is my css (the class .aside-check gets applied by javascript)

.aside-check {
     animation: fadein 2s;
}

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

What I would like now, is to give every paragraph a little delay, I tried 

p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}

but that doesn't work. Unfortunately I don't know what I did wrong...:/

Upvotes: 0

Views: 1832

Answers (1)

ashwell
ashwell

Reputation: 224

Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)

Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.

I made a little JS fiddle with a working example, hope it helps!

http://jsfiddle.net/Ashwell/HqBZU/

Here are the important bits: The animations applied to the paragraphs with the fill-mode set and starting opacity.

.aside-check > p{
    animation: fadein 2s;
    -webkit-animation: fadein 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    opacity: 0;
}

You'll also need the webkit key frames

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

And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!

I hope this answer isn't coming too late!

Upvotes: 1

Related Questions