Créez une Animation de Voiture Simple en CSS

On By Stéphane GOURBEILLE
Animation de Voiture en CSS

L’animation en CSS est un outil puissant pour améliorer l’expérience utilisateur sur votre site web. Dans cet article, nous allons explorer comment créer une animation de voiture simple qui se déplace d’un côté de l’écran à l’autre, en utilisant uniquement HTML et CSS. Ce type d’animation peut ajouter un élément ludique et interactif à votre site, sans alourdir le chargement de la page.

Préparation de l’Environnement HTML

Tout d’abord, nous définissons l’environnement de notre animation. Nous utilisons une <div> pour créer un conteneur, qui servira de piste pour notre voiture :

<div class="car-animation-container">
    <div class="car">
        <div class="wheel front-wheel"></div>
        <div class="wheel back-wheel"></div>
    </div>
</div>

Ici, la div avec la classe car-animation-container est notre piste. À l’intérieur, nous avons une autre div avec la classe car, qui représente notre voiture. Les deux div avec les classes front-wheel et back-wheel sont les roues de la voiture.

Stylisation avec CSS

Maintenant, passons à la partie CSS. Nous commençons par styliser notre conteneur et la voiture :

.car-animation-container {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #e0e0e0;
}

.car {
    width: 100px;
    height: 50px;
    background: red;
    position: absolute;
    bottom: 20px;
    border-radius: 10px;
}

.wheel {
    width: 20px;
    height: 20px;
    background: black;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
}

.front-wheel {
    left: 10px;
}

.back-wheel {
    right: 10px;
}

Le conteneur a une largeur de 100% et une hauteur fixe. La voiture est de couleur rouge avec des bordures arrondies pour un aspect plus stylisé. Les roues sont de simples cercles noirs positionnés aux extrémités de la voiture.

Ajout de l’Animation

La dernière étape est d’ajouter l’animation pour faire bouger la voiture :

@keyframes drive {
    0% {
        left: -120px;
    }
    100% {
        left: 100%;
    }
}

.car {
    animation: drive 5s linear infinite;
}

Nous utilisons les @keyframes pour définir l’animation nommée drive. L’animation déplace la voiture de la gauche vers la droite du conteneur. La propriété animation appliquée à la classe .car déclenche cette animation en boucle.

Le Code Complet

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Animation de Voiture en CSS</title>
    <style>
        .car-animation-container {
            width: 100%;
            height: 200px;
            position: relative;
            overflow: hidden;
            background: #e0e0e0;
        }

        .car {
            width: 100px;
            height: 50px;
            background: red;
            position: absolute;
            bottom: 20px;
            border-radius: 10px;
        }

        .wheel {
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }

        .front-wheel {
            left: 10px;
        }

        .back-wheel {
            right: 10px;
        }

        @keyframes drive {
            0% {
                left: -120px;
            }
            100% {
                left: 100%;
            }
        }

        .car {
            animation: drive 5s linear infinite;
        }
    </style>
</head>
<body>
    <div class="car-animation-container">
        <div class="car">
            <div class="wheel front-wheel"></div>
            <div class="wheel back-wheel"></div>
        </div>
    </div>
</body>
</html>