CSS : @starting-style, une nouvelle règle cool

La règle at @starting-style CSS est utilisée pour définir les valeurs de départ pour les propriétés définies sur un élément à partir duquel vous souhaitez effectuer la transition lorsque l'élément reçoit sa première mise à jour de style, c'est-à-dire lorsqu'un élément est affiché pour la première fois sur un élément précédemment chargé. page.

Prenons comme exemple un message toast. Pour l'afficher à l'utilisateur, nous modifierons sa visibilité, mais le résultat sera qu'il apparaît immédiatement. Nous pouvons maintenant utiliser la nouvelle règle @starting-style pour définir l'animation de départ de cet élément.

Quelques exemples simples

Utilisons ce code HTML de base, un simple rectangle :

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

Ajouter une transition initiale de couleur d'arrière-plan du bleu au rose

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

Ajouter une rotation à l'exemple précédent

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

Quoi qu’il en soit, vous voyez l’idée.
Animez vos popups, et menus ou créez un logo animé,
C'est simple.

NOTE

Cette fonctionnalité a actuellement une disponibilité limitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!