CSS Smooth animation

Can anyone suggest a really efficient way to do this fade and slide in as it seems to be glitchy (and I’m seeking perfection). CSS only perhaps?

@excede cute cats :slight_smile: Animation is smooth on my iPhone SE, 8 years old Mac Pro and of course M1 Mac. Where are you getting glitches? One way to optimize would be to use a smaller or responsive image.

Glitchy for me because you are updating the src value on the img as well as animating. I’d start by not doing that and having separate images inside a ‘slider’ div.

I’d then create a simple slider with javascript that adds an active class to an index on a setInterval. You’ve probably got the basic code but something like…

const images = document.querySelectorAll('.silder images');
let index = 0;

setInterval(() => {
  images.forEach((img, i) => img.classList.toggle('active-slide', index === i)) ;


  if (index >= images.length - 1) {
    index = 0
}, 3000)
.slider img { 
  transform: translateX(-10px);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;

.slider img.active-slide {
  transform: translateX(0);
  opacity: 1;

This code is just off the top of my head btw so It might be a starting point but don’t expect it to work.