Bert Bos |
Stijltransities (Future CSS, Utrecht 2013)
Stijltransities
CSS-transities
Laat veranderingen in stijl, zoals bij :hover
of :focus geleidelijk gebeuren
li#transition {
transition-property: background, width;
}
Januari 2013: Firefox ok, Opera ok, Safari met
prefix, Chrome met prefix, IE ok
Transition-property
Stap 1: Geef aan welke eigenschap(pen) een transitie-effect
krijgen
transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color,
height, width;
Transition-duration
Step 2: Hoe lang duurt de transitie
transition-duration: 2s;
transition-duration: 4000ms;
transition-duration: 4000ms, 8000ms;
Opmerking: meestal is transition-duration alleen al
voldoende, want de default voor transition-property
is all
Transition-timing-function
Step 3: Snelheid op elk moment van de transitie
ease | linear | ease-in | ease-out | ease-in-out |
cubic-bezier(<number>, <number>, <number>, <number>)
transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function:
cubic-bezier(0.6, 0.1, 0.15, 0.8);
Default: ease
Cubic bezier
Zelfgedefinieerde tijdfunkties
ease is hetzelfde als cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear is hetzelfde als cubic-bezier(0.0, 0.0, 1.0, 1.0)
:nth-child(1):hover {
transition-timing-function:
cubic-bezier(0.3, -0.3, 0.7, 1.3) }
Uitgestelde transities
Step 4: De transitie kan eventueel later beginnen
transition-delay: 5s;
transition-delay: 4000ms, 8000ms;
transition-delay: -5s;
„Eerder” beginnen betekent in werkelijkheid een stukje overslaan
In de praktijk is een overgang van minder dan een halve seconde genoeg. Voldoende om de aandacht te trekken en niet zo lang dat de gebruiker erdoor wordt afgeremd.