CSS Transitions
Paul Bremer
Transitions & keyframes
Transition, transform, animation en @keyframes 🙌🏼
• transition defineert hoe het gebeurd
• transform en animation voeren de changes uit
• @keyframes defineert wanneer het gebeurd
Voordelen
• Makkelijk; gebruik animaties zonder JavaScript
• Animaties lopen smooth; css animaties performen bijna altijd beter dan animaties in JavaScript
• Laat de browser nadenken; animaties hoeven niet te lopen in tabs die niet actief zijn
Transitions
Een transitie heeft een begin state en een end state, de browser vult alle tussengelegen states zelf in
Omdat een transitie gelimiteerd is aan twee states
is deze minder krachtig dan animation
maar eenvoudiger te gebruiken
Transition Property
Tells our transition which property of the element’s original style to transform.
Transition Duration
Sets how long the transition lasts and can be written using general timing values, including seconds s and milliseconds ms.
Transition Timing Function
Determines how the element behaves
while it is being transitioned
👇🏻
Transition Delay
A transition-delay is optional and useful if you want the transition to wait a bit before playing
👇🏻
Transition Shorthand
transition: property | duration | timing-function | delay;
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
Transition voorbeeld
Performance
Probeer zoveel mogelijk de transform en opacity properties te gebruiken.
Andere properties animeren kan langzaam worden wanneer het op een grote schaal gebruikt wordt.
Layout properties zorgen voor een nieuwe
browser paint en composite issues
👇🏻
will-change
Geef de browser een heads up door te luisteren naar CSS properties die gaan veranderen.
Transform
skewing, rotating, translating, of scaling
The transform property laat je visueel elementen manipuleren door een aantal functies;
Transform
Intro to CSS 3D transforms by David DeSandro
rotateY() + translateZ()
Transform
Intro to CSS 3D transforms by David DeSandro
rotateX() + rotateY() + translateZ()
Animations
Animations zijn krachtiger dan transitions. Transitions hebben een begin en een end state terwijl animations zoveel states kunnen hebben als je wil.
De verschillende states van een animatie is te definiëren door gebruik te maken van @keyframes
Animations
Er zijn maar twee properties verplicht
voor een css animatie.
animation-name
animation-duration
Animations
Alle verschillende properties
Animations
Of als shorthand
Performance
Voor animation geldt hetzelfde als voor transitions; gebruik de transform en opacity
properties wanneer mogelijk
Layout properties zorgen voor een nieuwe
browser paint en composite issues
👇🏻
keyframes
@keyframes is de tijdlijn voor een animatie
keyframes
Twitter's "fave" animatie
Icon animation
Animatie door middels de steps() timing function door verschillende frames van een afbeelding te lopen
Animation met steps()
@keyframes voorbeeld
@keyframes voorbeeld
Transform + Animation
Transform + Animation
Links
• Animate.css 👉🏻 https://daneden.github.io/animate.css/
• CSS Animation 👉🏻 https://cssanimation.rocks/
• CSS Trigger 👉🏻 https://csstriggers.com/
• requestAnimationFrame 👉🏻 https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
• will-change 👉🏻 Everything You Need to Know About
the CSS will-change Property
• CSS Grid 👉🏻 https://cssgrid.io/