# LevelUp Sessie ## Animaties en transities in CSS & JavaScript Johan Bijlsma - ShareValue

# Definities ## Transitie > Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like `:hover` or `:active` or dynamically set using JavaScript. (bron: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) )

# 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](https://drafts.csswg.org/css-animations/#animation) )

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

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

See the Pen animation example 1 - CSS | keyframe animation by Johan Bijlsma (@johanbijlsma) on CodePen.

DEMO - JS Animatie

See the Pen animation example 1 - JS | simple animation by Johan Bijlsma (@johanbijlsma) on CodePen.

DEMO - JS Animatie (RAF)

See the Pen Animation example 2 - JS | RequestAnimationFrame by Johan Bijlsma (@johanbijlsma) on CodePen.

DEMO - CSS transitie

See the Pen Animation example 2 - CSS | simple transition by Johan Bijlsma (@johanbijlsma) on CodePen.

DEMO - JS "Transitie"

See the Pen Animation example 2 - JS | simple transition by Johan Bijlsma (@johanbijlsma) on CodePen.

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);
    }
}

Een @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.to
gsap.from
gsap.timelime

Greensock

GSAP demo

Greensock

GSAP demo

React Spring

Bring your components to life with simple spring animation primitives...

React Spring

React Spring Demo

Bring your components to life with simple spring animation primitives...

Resources

Mijn Links

CSS frameworks

animate.css

JS frameworks

meer Resources...

Inspiratie