Is it possible to have a CSS slider cycle through two images when animating them with the translateX transform property?
I’m facing a couple of issues:
-
I can’t seem to get the second image to show even though it is in the HTML unless I use
position: absoluteand then theoverflow: hiddendoesn’t work on the parent? -
How do I reset the first image to go back to the beginning to start it all again?
Note: in the animation shorthand, the animation lasts for 2.5s and there is an initial delay of 3s.
I only want to do with this with the translateX property because I want the 60FPS smoothness (it will be done with translate3d when completed, but to make the code easier to read I’ve used translateX). I don’t wish to animate margin: left or the left property etc.
Any help would be amazing.
Code is below or link to Codepen: https://codepen.io/anna_paul/pen/ZEJrvRp
body {
position: relative;
margin: 0;
display: flex;
justify-content: center;
}
.container {
width: 500px;
height: 333px;
overflow: hidden;
}
.slider-wrapper {
display: flex;
}
.image {
display: block;
}
.hero-image-1 {
transform: translateX(0);
animation: slide-out-image-1 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1)
forwards;
}
@keyframes slide-out-image-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.hero-image-2 {
transform: translateX(100%);
animation: slide-in-image-2 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1) forwards;
}
@keyframes slide-in-image-2 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}<div class="container">
<div class="slider-wrapper">
<picture>
<img class="image hero-image-1" src="https://drive.google.com/uc?export=view&id=1l7cTX35wqd-4eYvFL8A5QLZ7LbOF9m4J">
</picture>
<picture>
<img class="image hero-image-2" src="https://drive.google.com/uc?export=view&id=1iB9R1aoeYSmkPX9Ju3NNOZhKylOjCA0y">
</picture>
</div>
</div>
