Créer une timeline CSS moderne : tutoriel + code complet

Créer une timeline CSS permet d’afficher des étapes chronologiques de manière claire, moderne et visuelle. Dans ce tutoriel frontend, vous allez apprendre à coder facilement une timeline CSS responsive, même si vous débutez, avec des exemples simples et directement réutilisables.

Vous avez sûrement déjà vu ces jBonne nouvelle, vous pouvez en créer une vous-même très facilement avec du CSS, même en étant débutant.

• Structurer et styliser une timeline CSS moderne et professionnelle
• Créer un composant visuel réutilisable pour améliorer l’impact et la lisibilité de vos pages
• Maîtriser les bases du positionnement et du responsive en CSS à travers un cas concret utile

Dans ce tutoriel, nous allons construire ensemble une timeline CSS moderne, élégante et responsive, étape par étape. Une jolie frise chronologique : parcours d’entreprise, étapes d’un projet, historique d’un produit… Et surtout, vous allez comprendre pourquoi chaque ligne de code existe. Pas de magie obscure, uniquement des bases solides que vous pourrez réutiliser partout.

Pourquoi utiliser une timeline CSS ?

Avant de coder, comprenons rapidement l’intérêt.

Une timeline CSS permet de :

• raconter une histoire visuellement
• structurer des étapes dans le temps
• améliorer l’expérience utilisateur

Et surtout… ça fait tout de suite plus “pro” sur votre site 😉

Voici ce que nous allons coder :

Étape 1 : La structure HTML (la base)

On commence simple. Une timeline, c’est juste une liste d’éléments.

Voici la structure de base :

<div class="timeline">

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2022</div>
            <div class="timeline-title">Début du projet</div>
            <div class="timeline-text">
                Lancement de votre idée et premières lignes de code.
            </div>
        </div>
    </div>

</div>

Explication simple

• .timeline : le conteneur global
• .timeline-item : chaque étape
• .timeline-content : la carte visuelle
• .timeline-date, .title, .text : le contenu

En résumé : vous empilez des blocs, rien de compliqué.

Étape 2 : Créer la ligne centrale

C’est l’élément clé d’une timeline CSS : la fameuse ligne verticale.

.timeline {
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: #2a2a2e;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

Ce que vous devez comprendre

• ::before crée un élément invisible
• position: absolute permet de le placer librement
• left: 50% centre la ligne
• transform ajuste parfaitement le centrage

• Cette technique est ultra utilisée en CSS, retenez-la !

Pour ceux qui débutent, tout savoir sur Le positionnement CSS.

Étape 3 : Positionner les blocs à gauche et à droite

Maintenant, on veut une alternance gauche/droite.

.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

Explication simple

• width: 50% : chaque bloc prend la moitié
• nth-child(odd) : cible les éléments impairs
• nth-child(even) : cible les éléments pairs

• Résultat : un effet zig-zag automatique.

C’est là que votre timeline CSS commence à prendre vie.

Étape 4 : Styliser les cartes pour le rendu visuel

On passe au design.

.timeline-content {
    background: #1a1a1f;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

Pourquoi c’est important ?

• border-radius : effet moderne
• hover : interaction utilisateur
• transition : animation fluide

Petit détail mais gros impact visuel.

Étape 5 : Ajouter les points sur la ligne

Sans ça, votre timeline CSS paraît… vide.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

.timeline-item::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #00f7ff;
    border-radius: 50%;
    top: 25px;
    z-index: 1;
}

Puis on ajuste :

.timeline-item:nth-child(odd)::before {
    right: -7px;
}

.timeline-item:nth-child(even)::before {
    left: -7px;
}

Ce que vous devez retenir

• On crée des “points” avec la pseudo-classe ::before
• On les place à gauche ou à droite selon l’élément

C’est ce qui relie visuellement chaque étape à la ligne.

Étape 6 : Gérer le responsive

Sur mobile, votre timeline CSS doit rester lisible grâce aux media query CSS :

@media screen and (max-width: 768px) {

    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 20px;
        margin-bottom: 30px;
        text-align: left !important;
        left: 0 !important;
    }

    .timeline-item::before {
        left: 13px;
    }
}

Explication simple

• On passe en une seule colonne
• On décale la ligne à gauche
• On aligne tout à gauche

Résultat sur un écran inférieur à 768px : une timeline verticale classique, parfaite sur mobile.

Exemple complet prêt à l’emploi

Voici une version fonctionnelle de votre timeline CSS :

<div class="timeline">

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2022</div>
            <div class="timeline-title">Début du projet</div>
            <div class="timeline-text">Lancement du projet.</div>
        </div>
    </div>

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2023</div>
            <div class="timeline-title">Premiers utilisateurs</div>
            <div class="timeline-text">Arrivée des visiteurs.</div>
        </div>
    </div>

</div>

Vous pouvez copier-coller ce code et l’adapter directement.

Améliorer votre timeline CSS

Une fois la base maîtrisée, vous pouvez vous amuser.

Ajouter une animation d’apparition

.timeline-item {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeIn 0.6s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Effet “wow” garanti.

👉 Pour en savoir plus sur les animations : IntersectionObserver, Animation d’élément à son apparition à l’écran.

Ajouter des couleurs dynamiques

.timeline-item:nth-child(odd) .timeline-content {
    border-left: 3px solid #00f7ff;
}

.timeline-item:nth-child(even) .timeline-content {
    border-right: 3px solid #ff00c8;
}

Idéal pour différencier les étapes.

👉 Pour ceux qui débutent : Les codes couleur en CSS

Ajouter des icônes

Vous pouvez remplacer les points par des icônes :

.timeline-item::before {
    content: '🚀';
    font-size: 16px;
}

Parfait pour une timeline plus vivante.

Les erreurs fréquentes à éviter

Quand on débute avec une timeline CSS, on fait souvent les mêmes erreurs :

• Oublier position: relative sur le parent
• Mal gérer les left et transform
• Ne pas tester sur mobile

Conseil : testez toujours en responsive dès le début.

Le code complet d’une timeline CSS

<style>
#wrapTimeline {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #0f0f12;
    color: #fff;
    width:100%;
    min-height: 600px;
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: #2a2a2e;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

.timeline-content {
    background: #1a1a1f;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.timeline-item::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #00f7ff;
    border-radius: 50%;
    top: 25px;
    z-index: 1;
    box-shadow: 0 0 10px #00f7ff;
}

.timeline-item:nth-child(odd)::before {
    right: -7px;
}

.timeline-item:nth-child(even)::before {
    left: -7px;
}

.timeline-date {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-bottom: 8px;
}

.timeline-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.timeline-text {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Responsive */
@media screen and (max-width: 768px) {

    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 20px;
        margin-bottom: 30px;
        text-align: left !important;
        left: 0 !important;
    }

    .timeline-item::before {
        left: 13px;
    }
}
</style>


<div id="wrapTimeline">
<div class="timeline">

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2022</div>
            <div class="timeline-title">Début du projet</div>
            <div class="timeline-text">Lancement de votre idée et premières lignes de code.</div>
        </div>
    </div>

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2023</div>
            <div class="timeline-title">Premiers utilisateurs</div>
            <div class="timeline-text">Votre projet commence à prendre vie avec ses premiers visiteurs.</div>
        </div>
    </div>

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2024</div>
            <div class="timeline-title">Croissance</div>
            <div class="timeline-text">Amélioration du design et ajout de nouvelles fonctionnalités.</div>
        </div>
    </div>

    <div class="timeline-item">
        <div class="timeline-content">
            <div class="timeline-date">2025</div>
            <div class="timeline-title">Succès</div>
            <div class="timeline-text">Le projet atteint une audience large et fidèle.</div>
        </div>
    </div>

</div>
</div>

---

Créer une timeline CSS, ce n’est pas juste un exercice de design. C’est une excellente façon de comprendre comment fonctionne le positionnement en CSS, les pseudo-éléments et la logique responsive.

Et surtout, vous venez de construire un composant que vous pourrez réutiliser dans énormément de projets : portfolio, blog, page entreprise… Bref, un vrai outil dans votre boîte à développeur.

Maintenant, à vous de jouer. Testez, cassez, recommencez… c’est comme ça qu’on progresse vraiment.