SO - CSS 3 Animation Answer

For: http://stackoverflow.com/questions/25023656/why-css3-slideshow-does-not-work

by David Kyle

HTML

<div id="right-leftSide"> 
    <div id="leftPic">
        <img id="chefPic" src="http://image.shutterstock.com/display_pic_with_logo/208792/207852826/stock-vector-glitters-fall-from-sky-background-vector-illustration-shiny-vector-sparkle-space-template-207852826.jpg" />
            <img id ="recipeImage" src="http://image.shutterstock.com/display_pic_with_logo/208792/206829649/stock-vector-rainbow-abstract-colorful-arcs-illustration-artistic-colorful-background-curvatures-spreading-206829649.jpg" />
            <img src="http://image.shutterstock.com/display_pic_with_logo/208792/206786131/stock-vector-purple-space-abstract-vector-sparkles-background-illustration-vector-abstract-purple-spark-206786131.jpg" id="recipeImage2" />
            <img id ="recipeImage" src="http://image.shutterstock.com/display_pic_with_logo/331132/331132,1300278908,8/stock-vector-blue-smooth-light-lines-vector-background-73290814.jpg" />
    </div>
</div>

CSS

#leftPic{
    background-color: #00FFFF;
    width:100%;
    height: 300px;
    position: relative;
    margin: 0 auto;
}
#leftPic img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;

}

#leftPic img:nth-of-type(1){
    animation: fadeInOut 24s 18s infinite;
    -webkit-animation: fadeInOut 24s 18s infinite;
}
#leftPic img:nth-of-type(2){
    animation: fadeInOut 24s 12s infinite;
    -webkit-animation: fadeInOut 24s 12s infinite;
}
#leftPic img:nth-of-type(3){
    animation: fadeInOut 24s 6s infinite;
    -webkit-animation: fadeInOut 24s 6s infinite;
}
#leftPic img:nth-of-type(4){
    animation: fadeInOut 24s 0s infinite;
    -webkit-animation: fadeInOut 24s 0s infinite;
}



@keyframes fadeInOut{
    0% {
opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    92%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInOut{
    0% {
opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    92%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}