# CSS Smooth animation

**URL:** <https://forum.pinegrow.com/t/css-smooth-animation/7695>\
**Category:** Questions\
**Tags:** css\
**Created:** [January 27, 2023, 6:02am UTC](https://forum.pinegrow.com/t/css-smooth-animation/7695 "2023-01-27T06:02:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)\
**Post date:** [January 27, 2023, 6:02am UTC](https://forum.pinegrow.com/t/css-smooth-animation/7695/1 "2023-01-27T06:02:14Z")

</div>

Can anyone suggest a really efficient way to do this [fade and slide in](https://cat-street.vercel.app/) as it seems to be glitchy (and I’m seeking perfection). CSS only perhaps?

> **[Cat Street](https://cat-street.vercel.app/)**
>
> Luxury Cat Products

 ![Screenshot 2023-01-27 at 5.00.03 pm](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7f9323c8e49d5e6d024b2fdfaf0163d7d3a00965.jpeg)

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [January 28, 2023, 12:30am UTC](https://forum.pinegrow.com/t/css-smooth-animation/7695/2 "2023-01-28T00:30:57Z")

</div>

@excede cute cats 🙂 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.

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [February 1, 2023, 9:11pm UTC](https://forum.pinegrow.com/t/css-smooth-animation/7695/3 "2023-02-01T21:11:56Z")

</div>

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…

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

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

  index++

  if (index >= images.length - 1) {
    index = 0
  }
}, 3000)

```

```css
.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.