mardi 21 avril 2015

CSS3 loop animation with

I'm trying to use this code for a website.
I'm using CSS3 Keyframe and animations for it with a simple list

#animation ul { /* The list with elements */
    position: relative;
    text-align: center;
    width: 200px;
}
#animation li { /* Common styles for the list elements */
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    opacity: 0;
    padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
    background-color: lightgreen;
    
    -webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
    -moz-animation: fadein 6s ease-in-out -4s infinite alternate;
    animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
    background-color: yellow;
    
    -webkit-animation: fadein 6s ease-in-out 0s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 0s infinite alternate;
    animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
    background-color: lightblue;
    
    -webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
    -moz-animation: fadein 6s ease-in-out 4s infinite alternate;
    animation: fadein 6s ease-in-out 4s infinite alternate;
}


/* Defines the animation keyframes */
@-webkit-keyframes fadein {
    0% {           /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */ 
        opacity: 0;
    }
    66% {          /* Actual beginning of the fade in animation */
        opacity: 0;
    }
    76% {          /* The fade in animation takes 10% of the duration time */
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
<div id="animation">
    <ul>
        <li>This is</li>
        <li>CSS3 looped</li>
        <li>animation</li>

    </ul>
</div>

I want to set 5 elements instead of 3 but when I edit this code with 5 elements, it's not the same result..

Thanks for the help !

Aucun commentaire:

Enregistrer un commentaire