Keyframes (styled-components)

Styled-Components 🟡 Mid

Définition

Helper keyframes qui génère un nom d'animation unique pour éviter les collisions globales. S'utilise comme une animation CSS classique dans un styled component.

Analogie

Un pas de danse avec un nom unique : personne d'autre ne peut le confondre avec le sien.

Exemple de code

import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
`
const Box = styled.div`
  animation: ${fadeIn} 0.3s ease-in-out;
`

Cas d'usage

Définir des animations CSS scopes dans styled-components sans collision de noms.

Termes liés

#styling#css-in-js