Keyframes (styled-components)

Definition

Helper keyframes qui genere un nom d'animation unique pour eviter 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

Definir des animations CSS scopes dans styled-components sans collision de noms.

Termes lies