Add an transition-delay for each child element

Asked Jan 03 '17 at 06:05

Active Jan 03 '17 at 07:13

Viewed 52 times

I was wondering how to fade in every 'a' element after the other has faded in. For example: 'Profile' will fade in, and then 1 second later 'Experiences' and so on. Does this require creating a list? So far I have gotten the elements to fade it all together. The code is below.

    .menuitems{
        font-family: pal1;
        font-size: 1rem;
        opacity: 0;
        transition: opacity 1s 999999s;
        transition-timing-function: ease-out;
        position: absolute;
        right: 3%;
        top: 4.4%;
        text-align: right;
    }
    .menu_Title:hover + .menuitems{
        transition-delay: 0.1s;
        opacity: 1;
    }

    <p class="menu_Title"> //menu </p>
    <div class = "menuitems">
        <a href="#">Profile</a><br>
        <a href="#">Experiences</a><br>
        <a href="#">Skills</a><br> 
        <a href="#">Contact</a><br>  
    </div>

edited Jan 03 '17 at 07:13

Abood

asked Jan 03 '17 at 06:05

user3015519

`.menu_Title:hover + .menuitems > a{ /* css */ }`? – GROVER. Jan 03 '17 at 06:08
See http://stackoverflow.com/questions/8294400/css-animations-with-delay-for-each-child-element or use JS – Roko C. Buljan Jan 03 '17 at 06:15
insert your code to js fiddle, so everyone can easily test what've you did. – Obink Jan 03 '17 at 06:23
Use `:nth-child()` to add custom delays – Chris Happy Jan 03 '17 at 06:27
try this https://plnkr.co/edit/MhUpDSZiSiSaN3FeQg5c?p=preview – Sharmila Jan 03 '17 at 07:08

Add an transition-delay for each child element

0 Answers0