JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<div>
    <zdjecie></zdjecie>
    <zdjecie></zdjecie>
    <zdjecie></zdjecie>
</div>

CSS

div{
    position: absolute;
    width: 320px;
    height: 240px;
    overflow: hidden;
}
zdjecie{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
}
zdjecie:first-child{
    background-image: url(http://tours-tv.com/objects/kazakhstan-landscape/kazakhstan%20landscape.jpg);
    -webkit-animation: animacja 15s ease-in-out infinite;
}
zdjecie:nth-child(2){
    background-image: url(http://1.bp.blogspot.com/_Iy2QexktI8w/TVJul8gjh4I/AAAAAAAAAAk/JrfUF_SwpLE/s320/Wolf+1.jpg);
    -webkit-animation: animacja 15s 5s ease-in-out infinite;
}
zdjecie:last-child{
    background-image: url(http://www.groovythemes.com/animals/confused_cat-med.jpg);
    -webkit-animation: animacja 15s 10s ease-in-out infinite;
}

@-webkit-keyframes animacja{
    0%{ visibility: hidden; opacity:0; z-index:12;transform: translateX(-100%);}
    16.67%{ visibility: visible; opacity:1; z-index:12;transform: translateX(0);}
    33.33%{ visibility: visible; opacity:1; z-index:11;transform: translateX(0);}
    50%{ visibility: hidden; opacity:0; z-index:10; transform: translateX(100%);}
}