> When a company wants to showcase its strength, It usually lists some pictures of the companies it collaborates with, scrolling through them. Now let's implement this funciton. We have several ways to implement this. First, we can use pure HTML and CSS to implement this. Let's prepare the html first. ```html

``` Maybe you will ask why we need to repeat the images. It's because we want to create a continuous scrolling effect. If you don't repeat the images, the carousel will be empty when the images are scrolled to the end. You can try to remove the repeat images and see the result then. Now, let's implement the CSS. ```css .container { width: 900px; height: 150px; overflow: hidden; display: flex; } .group { display: flex; width: 100%; will-change: transform; animation: scrolling 10s linear infinite; } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ``` Since the animation is linear, we can use the `animation-play-state` property to pause the animation when the mouse is over the carousel. ```css .container:hover .group { animation-play-state: paused; } ``` That's it. Now you have a simple image carousel.