Animations/Char Spin

Char Spin

Chaque caractere apparait avec une rotation Y. Effet machine a ecrire premium.

triggerCSStextrevealcode
Trigger: State change
CSS requis: Oui
Difficulte: easy

Preview live

Code

<span style={{ perspective: "500px" }}>
  {text.split("").map((char, i) => (
    <span key={`${animKey}-${i}`} className="inline-block"
      style={{
        animation: "charSpin 400ms ease-out forwards",
        animationDelay: `${i * 20}ms`,
        opacity: 0,
      }}>
      {char === " " ? "\u00A0" : char}
    </span>
  ))}
</span>

CSS requis

@keyframes charSpin {
  0% { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

Instructions

Changez la key (animKey) pour re-trigger l'animation. Le delay de 20ms par caractere cree l'effet machine a ecrire. Ajustez la perspective (500px) et la duree (400ms) selon le style voulu.