Les jeux rétro ont marqué toute une génération, et l’intro mythique de Pokémon Bleu/Rouge sur GameBoy en fait partie. Reproduire cette animation en HTML et CSS est un excellent exercice pour explorer les animations CSS et les bonnes pratiques d’intégration web.
Dans cet article, nous allons analyser un projet qui recrée cette introduction en utilisant HTML, CSS et animations CSS.

Le fichier index.html définit la structure de l’animation. Voici ses éléments clés :

<link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://public.codepenassets.com/js/prefixfree-1.0.7.min.js"></script>

• Une feuille de style pour réinitialiser les styles par défaut du navigateur.
• Un fichier CSS principal (style.css) pour le design et les animations.
• Une bibliothèque JavaScript (PrefixFree) permettant d’utiliser les propriétés CSS modernes sans préfixes.

<audio autoplay>
  <source src='https://www.davidguia.me/github/intro.mp3' type='audio/mpeg'>
</audio>

<div class='wrapper'>
  <div class='composition'>
    <div class='scene scene--1'> ... </div>
    <div class='scene scene--2'> ... </div>
    <div class='scene scene--3'> ... </div>
  </div>
</div>

• La div .wrapper englobe l’ensemble du projet.
• .composition est une zone d’affichage de 192px × 144px, correspondant à la résolution d’un écran GameBoy, avec un zoom x4 pour le rendre visible sur un écran moderne.
• Les scènes scene–1, scene–2 et scene–3 correspondent aux différentes étapes de l’animation :
• Game Freak Logo
• Combat entre Nidorino et Gengar
• Logo Pokémon GameBoy

Le fichier style.css contient l’ensemble des animations et effets visuels qui reproduisent l’intro.

.wrapper {
  background: black;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.composition {
  position: relative;
  width: 192px;
  height: 144px;
  overflow: hidden;
  transform: scale(4);
}

• .wrapper occupe toute la hauteur de l’écran et centre l’animation.
• .composition est agrandie pour mieux s’adapter aux écrans modernes.

.scene--1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: fade 0s 5.3s linear reverse;
}

• .scene–1 affiche le logo Game Freak avec une animation de fondu.
• La classe .gamefreak-logo applique un effet de brillance au logo.

.scene--2 .gengar-wrapper {
  animation: gg-intro 1.2s 4.8s linear, gg-tackle 1.2s 9s linear;
}
@keyframes gg-intro {
  from { transform: translateX(-10px); }
  to { transform: translateX(-100px); }
}
@keyframes gg-tackle {
  0% { transform: translateX(-100px); }
  40% { transform: translateX(-70px); }
  75% { transform: translateX(-70px); }
  100% { transform: translateX(-100px); }
}

• Gengar apparaît sur la droite et avance vers le centre.
• Il effectue une attaque en fonçant vers l’avant et en revenant en arrière.

De la même manière, Nidorino réagit avec des animations simulant son mouvement et son attaque.

.scene--3 {
  opacity: 0;
  animation: fade 0s 14.2s linear;
}
.scene--3 .pokemon-logo {
  animation: logo-entrance 0.3s 15s linear;
}
@keyframes logo-entrance {
  from { transform: translateX(-3px) translateY(-50px); }
  to { transform: translateX(-3px) translateY(20px); }
}

• Après le combat, la scène 3 s’affiche avec un fondu progressif.
• Le logo Pokémon descend pour apparaître au centre.

Ce projet est un excellent exemple de reproduction d’animations rétro avec CSS et HTML. Il illustre l’importance des animations CSS, des transformations et de l’organisation en scènes pour recréer une cinématique en full CSS.

Si vous souhaitez aller plus loin :

• Ajoutez du JavaScript pour gérer la synchronisation des animations.
• Optimisez les animations pour améliorer la fluidité.
• Expérimentez avec d’autres jeux rétro en utilisant la même approche.