Grow your CSS skills. Land your dream job.

CSS3 keyframe animation including delay (toggled with JS)

  • # May 22, 2013 at 9:11 am

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

    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…:/

    (removed unnecessary vendor-prfx and classes)

    # May 30, 2013 at 2:52 am

    .aside-check .aside-check p {}

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

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

    .aside-check p:nth-child(1) {animation-delay:2s}
    .aside-check p:nth-child(2) {animation-delay:3s}
    .aside-check p:nth-child(3) {animation-delay:4s}
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".