Maison >interface Web >tutoriel CSS >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.
Utilisons ce code HTML de base, un simple rectangle :
.container { width: 10rem; height: 10rem; background-color: hotpink; }
.container { ... transition: background-color 4s; } @starting-style { .container { background-color: blue; } }
.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.
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!