NEW
A Strong Title
Now available at a store or supermarket near you 👍
LevelUp Sessie
Animaties en transities in CSS & JavaScript
Johan Bijlsma - ShareValueDefinities
Transitie
Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like
:hoveror:activeor dynamically set using JavaScript. (bron: MDN )
Definities
Animaties
The animation shorthand property is a comma-separated list of animation definitions. Each item in the list gives one item of the value for all of the subproperties of the shorthand, which are known as the animation properties. (bron: W3C )
CSS Pros & Cons
CSS Pros & Cons
Voordelen?
- Makkelijk te implementeren
- Simpele Syntax
- Zowel Transitions als animaties
- Gunstig voor Memory en CPU
CSS Pros & Cons
Nadelen?
- Time-based
- Geen support voor Dynamische content
- Animaties kunnen niet gecombineerd worden
- Je kunt alleen elementen animeren die geen ‘re-paint’ van de DOM opleveren
JS Pros & Cons
JS Pros & Cons
Voordelen?
- Dynamisch inzetbaar (input, state change, etc)
- Complexe aniaties mogelijk
- Animaties kunnen gecombineerd worden
- Meer mogelijkheden dan via CSS
JS Pros & Cons
Nadelen?
- Veel code nodig voor simpele animaties
- Animaties gaan over de main thread
- Vaak heb je plugins / libraries nodig (extra KB's, HTTP-requests, enz)
DEMO - CSS Animatie
DEMO - JS Animatie
DEMO - JS Animatie (RAF)
DEMO - CSS transitie
DEMO - JS "Transitie"
CSS Syntax - Transition
de Syntax is vrij simpel:
transition
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;CSS Syntax - Transition
Maar je kunt ook verschillende properties stylen:
transition
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s,
background-color 2s linear 50ms;Hiermee kun je met 1 CSS declaration meerdere transitions mee geven.
Daarnaast bestaan ook de attributes all en none.
CSS Syntax - Animation
de animation syntax is iets complexer:
Animation
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;Bovenstaande code wordt toegegevoegd aan het element dat je wil animeren. Maar eerst moet de animatie nog worden gedefinieerd
CSS Syntax - Animation
Een @keyframes animatie
Animation
@keyframes bgFade {
0% {
background-color: rgba(255, 255, 255, 0.2);
}
100% {
background-color: rgba(197, 29, 29, 0.45);
}
}@keyframes animatie moet een minimaal een naam hebben. Percentages zijn niet verplicht (from en to zijn ook toegestaan).
JS Syntax
De syntax is iets complexer dan CSS :
animate()
const animation = element.animate(keyframes, options);
animation 101; wat kun je animeren 🤔?
- all
- backdrop-filter
- background
- background-color
- background-position
- background-size
- block-size
- border
- border-block-end
- border-block-end-color
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-width
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image-outset
- border-image-slice
- border-image-width
- border-inline-end
- border-inline-end-color
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-width
- border-left
- border-left-color
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-width
- border-start-end-radius
- border-start-start-radius
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-width
- border-width
- bottom
- box-shadow
- clip
- clip-path
- color
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-width
- column-width
- columns
- filter
- flex
- flex-basis
- flex-grow
- flex-shrink
- font
- font-size
- font-size-adjust
- font-stretch
- font-variation-settings
- font-weight
- gap
- grid-column-gap
- grid-gap
- grid-row-gap
- grid-template-columns
- grid-template-rows
- height
- inline-size
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- left
- letter-spacing
- line-clamp
- line-height
- margin
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- mask
- mask-border
- mask-position
- mask-size
- max-block-size
- max-height
- max-inline-size
- max-lines
- max-width
- min-block-size
- min-height
- min-inline-size
- min-width
- object-position
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-position
- offset-rotate
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-width
- padding
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- right
- rotate
- row-gap
- scale
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-coordinate
- scroll-snap-destination
- scrollbar-color
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- text-decoration
- text-decoration-color
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-indent
- text-shadow
- text-underline-offset
- top
- transform
- transform-origin
- translate
- vertical-align
- visibility
- width
- word-spacing
- z-index
- zoom
animation 101; Maar eigenlijk 🤓
- all
- backdrop-filter
- background
- background-color
- background-position
- background-size
- border
- box-shadow
- clip
- clip-path
- color
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-width
- column-width
- columns
- filter
- flex
- flex-basis
- flex-grow
- flex-shrink
- font-size
- font-size-adjust
- font-stretch
- font-weight
- gap
- grid-column-gap
- grid-gap
- grid-row-gap
- grid-template-columns
- grid-template-rows
- letter-spacing
- line-clamp
- line-height
- margin
- opacity
- order
- outline
- padding
- perspective
- perspective-origin
- rotate
- row-gap
- scale
- text-indent
- text-shadow
- transform
- translate
animation 101; Maar voor de zekerheid 👷
- opacity
- translate
- rotate
- scale
Greensock
Greensock is een JavaScript Animation Framework
Greensock
Greensock biedt een hoop extra mogelijkheden.
gsap.togsap.fromgsap.timelime
Greensock
GSAP demo
Greensock
GSAP demo
sunny
React Spring
Bring your components to life with simple spring animation primitives...
React Spring
React Spring DemoBring your components to life with simple spring animation primitives...
Resources
CSS frameworks
JS frameworks
meer Resources...
LevelUp Sessie Animaties en transities in CSS & JavaScript Johan Bijlsma - ShareValue