How to make a slide transition with CSS?

Question

css

There is a site where slides are made on pure CSS as the background of the site. Those. the background of the site changes after a few seconds. But now these slides are changing with the so-called fade effect - as if dissolving into a new slide. And you need to make the slides just automatically scroll through after 10 seconds, like a normal slider.
Help, please, how to do this?

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent;
}
.cb-slideshow li span {

    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    background-size: cover;
    background-position: 50% 0;
    opacity: 0;
    z-index: 1000;
    -webkit-backface-visibility: ;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    height: 100%;

    -webkit-animation: titleAnimation 30s linear infinite 0s;
    -moz-animation: titleAnimation 30s linear infinite 0s;
    -o-animation: titleAnimation 30s linear infinite 0s;
    -ms-animation: titleAnimation 30s linear infinite 0s;
    animation: titleAnimation 30s linear infinite 0s;
}

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/bg.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/promo1.jpg);
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/promo2.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}

/**/
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
        -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
        -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
    0% { opacity: 0;
        -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
        -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
    0% { opacity: 0;
        -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
        -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
    0% { opacity: 0;
        -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
        -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation {
    0% { opacity: 0;
        animation-timing-function: ease-in; }
    8% { opacity: 1;
        animation-timing-function: ease-out; }
    17% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

Answer 1

transform: translateX() - if horizontal -100% left and 100% right
transform: translateY() - if vertical, respectively.
and instead of percentages in keyframes, just use from {} and to {}
, that is, it will look like
from {transform: translateX(0%);}
to {transform: translateX(-100%);}
If it doesn't work with percentages, try pixels