.demo-block {
    perspective: 200px;
    overflow: hidden;
}


.demo-block li {
    list-style-type: none;
}

.demo-block li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: imageAnimation 42s linear infinite;
}

.demo-block li h3 {
    position: absolute;
    width: 100%;
    margin: 0;
    left: 0;
    bottom: 50%;
    font-size: 4em;
    color: #fff;
    text-align: center;
    opacity: 0;
    animation: titleAnimation 42s linear infinite;
}

.demo-block li:nth-child(1) span {
    background-image: url(../images/pic16.jpg)
}

.demo-block li:nth-child(2) span {
    background-image: url(../images/pic3.jpg);
    animation-delay: 7s;
}

.demo-block li:nth-child(3) span {
    background-image: url(../images/pic2.jpg);
    animation-delay: 14s;
}

.demo-block li:nth-child(4) span {
    background-image: url(../images/pic18.jpg);
    animation-delay: 21s;
}

.demo-block li:nth-child(5) span {
    background-image: url(../images/pic15.jpg);
    animation-delay: 28s;
}

.demo-block li:nth-child(6) span {
    background-image: url(../images/pic20.jpg);
    animation-delay: 35s;
}

.demo-block li:nth-child(2) h3 {
    animation-delay: 7s;
}

.demo-block li:nth-child(3) h3 {
    animation-delay: 14s;
}

.demo-block li:nth-child(4) h3 {
    animation-delay: 21s;
}

.demo-block li:nth-child(5) h3 {
    animation-delay: 28s;
}

.demo-block li:nth-child(6) h3 {
    animation-delay: 35s;
}

@keyframes imageAnimation {
    0%,
    100% {
        opacity: 0;
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
    }
    17% {
        opacity: 1;
        transform: scale(1.1);
    }
    25% {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes titleAnimation {
    0% {
        letter-spacing: 0px;
        opacity: 0;
        transform: translateY(150px);
    }
    8% {
        letter-spacing: 15px;
        opacity: 1;
        transform: translateY(0px);
    }
    /* 17% is 7 seconds - one frame */
    17% {
        letter-spacing: 15px;
        opacity: 1;
        transform: scale(1.2);
    }
    25% {
        opacity: 0;
        transform: translateZ(-300px);
    }
    100% {
        opacity: 0;
    }
}