Is it possible to continuously animate a carousel of DIVs? - html

Question

Assuming the red box represents my webpages container, and items B,C,D are outside the container. Is it possible to have the items (A,B,C,D...) auto scroll left to right like a carousel using just CSS?
I'm seen examples online on how to do this with images but not with DIVs full of text with a set width?
.container {
margin: 0 auto;
width: 800px;
background: red;
padding: 36px;
box-sizing: border-box;
}
.items {
display: flex;
}
.item {
box-sizing: border-box;
margin-left: 72px;
margin-right: 72px;
padding: 36px;
position: relative;
width: 200px;
min-width: 200px;
background: #efefef;
text-align: center;
border-radius: 4px;
}
<div class="container">
<div class="items">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
</div>
</div>

Answer 1

Here's a way to do it.
.container {
margin: 0 auto;
background: red;
box-sizing: border-box;
overflow-x: hidden;
}
.items {
min-height: 200px;
position: relative;
}
.item {
box-sizing: border-box;
padding: 36px;
position: absolute;
width: 30%;
background: #efefef;
text-align: center;
border-radius: 4px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: slide-item 4s infinite;
animation-timing-function: cubic-bezier(.4, 0, .2, 1);
opacity: 0;
}
.item:nth-child(2) { animation-delay: 1s; }
.item:nth-child(3) { animation-delay: 2s; }
.item:nth-child(4) { animation-delay: 3s; }
#keyframes slide-item {
0% { left: 150%; opacity: 1; }
36% { left: 50%; opacity: 1; }
72% { left: -50%; opacity: 1; }
100% { left: -50%; }
}
<div class="container">
<div class="items">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
</div>
</div>