Creating Simple Animations with CSS Only [Carousel with AI Illustrations]

Introduction

Hello, I'm Easygoing.

This time, we'll explore how to add motion to a website using simple animations.

Here’s the Real Thing!

Here’s the animation I actually created:

What is a CSS Carousel?

• CSS (Cascading Style Sheet): A language for designing web pages
• Carousel: Merry-go-round

CSS is a computer language used to design web pages.

The term "carousel" means merry-go-round in English, and it’s easy to understand if you picture the merry-go-round at an amusement park.

A CSS carousel is a method to display illustrations in a looping slideshow, creating a simple animation that adds movement to a web page when implemented.

Preparing the Illustrations

Let’s go through the actual steps.

First, prepare the illustrations for the animation.

This time, we’ll use the following five illustrations:

1. Illuminated Autumn Foliage

2. Atlantic Sailing Ship

3. The Birth of AI

4. Nighttime Sports Car

5. Autumn Breeze

Arranging the Images Side by Side

Next, arrange the images side by side.

This will make the layout quite wide, but that’s okay for now.

The key point here is to place the same image at both the start and the end. This is important for making the animation smooth, as explained later.

Setting Up a Screen in the Foreground!

Next, set up a screen in the foreground to display the slideshow.

This screen is exactly the same size as one illustration.

The parts of the images that overflow beyond the screen are set to be hidden.

Aligning the First Image

First, align the first image with the screen.

At this point, the parts overflowing to the right of the screen are hidden, so only the first image is displayed.

Moving Left with Animation

Now, move the images one position to the left using animation.

Since the parts overflowing the screen are hidden, it looks like the slideshow has moved to the second image.

Rewinding All at Once at the End!

As the slideshow progresses, the sixth (final) illustration is displayed.

At this point, rewind the slideshow instantly from the sixth image back to the first.

Since the first and sixth images are the same, rewinding instantly makes it unnoticeable to the viewer.

By repeating this process, the five illustrations are displayed in sequence in a slideshow.

The Actual Code

Here is the actual code used this time.

HTML

<div class="carousel-screen">
    <div class="carousel-container">
        <div class="carousel">
            <img alt="" src="" height="" width="">
        </div>
        <div class="carousel">
            <img alt="" src="" height="" width="" loading="lazy">
        </div>
        <div class="carousel">
            <img alt="" src="" height="" width="" loading="lazy">
        </div>
        <div class="carousel">
            <img alt="" src="" height="" width="" loading="lazy">
        </div>
        <div class="carousel">
            <img alt="" src="" height="" width="" loading="lazy">
        </div>
        <div class="carousel">
            <img alt="" src="" height="" width="" loading="lazy">
        </div>
    </div>
</div>

Enter the appropriate values for the image description, image path, height, and width for each image.

Also, use the same image for the first and last.

CSS

<style>
.carousel-screen {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
  
.carousel-container {
    display: grid; 
    gap: 1px;
    grid-template-columns: repeat(6, 1fr); 
    width: 600%; 
    height: 100%;
    animation: carousel-animation 30s infinite; 
}

.carousel {
    height: 100%; 
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
@keyframes carousel-animation {
  0% {transform: translateX(0%)}
  15% {transform: translateX(0%)}
  20% {transform: translateX(-16.6666%)}
  35% {transform: translateX(-16.6666%)}
  40% {transform: translateX(-33.3333%)}
  55% {transform: translateX(-33.3333%)}
  60% {transform: translateX(-50%)}
  75% {transform: translateX(-50%)}
  80% {transform: translateX(-66.6666%)}
  95% {transform: translateX(-66.6666%)}
  100% {transform: translateX(-83.3333%)}
}
</style>

The CSS is a simple implementation, but you can change the aspect ratio of the screen or the animation timing to create various variations.

CSS Animations are Lightweight and Simple

The CSS animation used this time has the following advantages:

• Simple
• Lightweight processing
• Fewer issues

CSS animations are generally lighter in processing and less prone to issues compared to JavaScript-based animations.

While they can’t achieve the complex movements possible with JavaScript, they are more than sufficient for easily adding motion to a web page.

Referenced Fuma’s Article

This CSS carousel was inspired by Fuma’s method.

Fuma shares many customizations, primarily for Google Blogger, beyond the CSS carousel introduced here.

Their collection of lightweight, high-speed customizations is very useful and can be applied to sites other than Blogger.

Summary: Try CSS Animations!

• CSS animations are lightweight and simple
• They add motion to websites
• They let you revisit past illustrations

This time, we implemented a CSS animation.

The illustrations used were all created in the past, and displaying them in a carousel brings back nostalgic memories of when they were generated.

Unfortunately, the CSS animation introduced here cannot be used on note, but it can be easily implemented on other web services, adding motion to websites.

For those starting a blog, I recommend note for its simplicity, ease of starting, and ease of continuing. However, if you want to customize and create an original site, trying services like Blogger could be interesting.

Thank you for reading until the end!

Related Articles

About Google Blogger

Advantages of note