Overgang - CSS-trucs | CSS Almanac 2025

De transitioneigenschap is een verkorte eigenschap die wordt gebruikt om maximaal vier overgangsgerelateerde langhandige eigenschappen weer te geven:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Met deze overgangseigenschappen kunnen elementen waarden gedurende een bepaalde duur wijzigen, waardoor de eigenschapswijzigingen worden geanimeerd, in plaats van dat ze onmiddellijk plaatsvinden. Hier is een eenvoudig voorbeeld dat de achtergrondkleur van een element verandert in: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Die div duurt een halve seconde als de muis eroverheen gaat om van rood in groen te veranderen. Hier is een live demonstratie van een dergelijke overgang:

Zie de Pen Transition Demo van Louis Lazaris (@impressivewebs) op CodePen.

U kunt een bepaalde eigenschap specificeren zoals we hierboven hebben, of de waarde "all" gebruiken om naar overgangseigenschappen te verwijzen.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

In dit bovenstaande voorbeeld zullen zowel de achtergrond als de opvulling overgaan, vanwege de waarde 'all' die is gespecificeerd voor het transition-propertygedeelte van de steno.

U kunt waardensets met komma's scheiden om verschillende overgangen op verschillende eigenschappen te maken:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Voor het grootste deel doet de volgorde van de waarden er niet toe, tenzij er een vertraging is gespecificeerd. Als u een vertraging opgeeft, moet u eerst een duur opgeven. De eerste waarde die de browser herkent als een geldige tijdwaarde, vertegenwoordigt altijd de duur. Elke volgende geldige tijdwaarde wordt geparseerd als de vertraging.

Sommige eigenschappen kunnen niet worden overgezet omdat het geen eigenschappen zijn die kunnen worden geanimeerd. Zie de specificatie voor een volledige lijst van welke eigenschappen animeerbaar zijn.

Door de overgang op het element zelf te specificeren, definieert u de overgang die in beide richtingen moet plaatsvinden. Dat wil zeggen, wanneer de stijlen worden gewijzigd (bijv. Bij zweven aan), zullen de eigenschappen overgaan, en wanneer de stijlen weer veranderen (bijv. Bij zweven uit) zullen ze overgaan. De volgende demo-overgangen bijvoorbeeld bij zweven, maar niet bij zweven uit:

Zie de Pen zohgt door Louis Lazaris (@impressivewebs) op CodePen.

Dit gebeurt omdat de overgang is verplaatst naar de :hovertoestandselector en er geen overeenkomende overgang op de selector is die het element direct zonder de :hovertoestand target .

Voor compatibiliteit in alle ondersteunende browsers zijn leveranciersvoorvoegsels vereist, waarbij de standaardsyntaxis als laatste wordt verklaard:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (de eerste stabiele versie van IE die wordt ondersteund transition) vereist geen -ms-prefix.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.