CSS
Transitions
Zoeken…
Syntaxis
- overgang: [overgangseigenschap] [overgangsduur] [overgangs-timing-functie] [overgangsvertraging];
parameters
| Parameter | Details |
|---|---|
| transitie-objecten | De specifieke CSS-eigenschap waarvan de waardeverandering moet worden overgezet (of) all , als alle over te dragen eigenschappen moeten worden overgezet. |
| overgang duration | De duur (of periode) in seconden ( s ) of milliseconden ( ms ) waarover de overgang moet plaatsvinden. |
| transitie-timing-functie | Een functie die beschrijft hoe de tussenliggende waarden tijdens de overgang worden berekend. Veelgebruikte waarden zijn ease , ease-in ease-out , ease-in-out , linear , cubic-bezier() , steps() . Meer informatie over de verschillende timingfuncties is te vinden in de W3C-specificaties . |
| transitie-delay | De hoeveelheid tijd die moet zijn verstreken voordat de overgang kan beginnen. Kan worden opgegeven in seconden ( s ) of milliseconden ( ms ) |
Opmerkingen
Sommige oudere browsers ondersteunen alleen transition leveranciersvoorvoegsels :
-
-webkit: Chrome 25-, Safari 6-, Safari & Chrome voor iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- voor Android. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Voorbeeld:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Overgang steno
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
In dit voorbeeld wordt de achtergrondkleur gewijzigd wanneer de div-muisaanwijzer wordt geplaatst, duurt de verandering van achtergrondkleur 1 seconde.
Overgang (longhand)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- transition-property : specificeert de CSS-eigenschappen waarvoor het overgangseffect is. In dit geval zal de div zowel horizontaal als verticaal uitklappen wanneer hij zweeft.
- overgangsduur : geeft aan hoe lang het duurt voordat een overgang is voltooid. In het bovenstaande voorbeeld zullen de hoogte- en breedte-overgangen respectievelijk 1 seconde en 500 milliseconden duren.
- transition-timing-function : Specificeert de snelheidscurve van het overgangseffect. Een lineaire waarde geeft aan dat de overgang van start tot finish dezelfde snelheid zal hebben.
- overgangsvertraging : bepaalt de hoeveelheid tijd die nodig is om te wachten voordat het overgangseffect begint. In dit geval zal de hoogte onmiddellijk beginnen te veranderen, terwijl de breedte 1 seconde wacht.
kubieke Bezier
De cubic-bezier functie is een overgangstimingfunctie die vaak wordt gebruikt voor aangepaste en soepele overgangen.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
De functie heeft vier parameters:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Deze parameters worden toegewezen aan punten die deel uitmaken van een Bézier-curve :
Voor CSS Bézier Curves staan P0 en P3 altijd op dezelfde plek. P0 staat op (0,0) en P3 staat op (1,1), wat betekent dat de parameters die worden doorgegeven aan de functie cubic-bezier alleen tussen 0 en 1 kunnen liggen.
Als u parameters doorgeeft die zich niet binnen dit interval bevinden, wordt de functie standaard ingesteld op een linear overgang.
Omdat cubic-bezier de meest flexibele overgang in CSS is, kunt u alle andere overgangstimingfuncties vertalen naar cubic-bezier-functies:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)