CSS Animations

@mJordanCodes

Why Animate?

Informative

Focus

Expressive

Material Design Motion Principles

What should you animate?

Browser Rendering Pipeline

Style Calculations

Layout

Paint

Rendering Performance: Web.Dev

Composite

Properties handled by the Compositor

Position

transform: translate(npx, npx);

Scale

transform: scale(n);

Rotation

transform: rotate(ndeg);

Skew

transform: skew[X|Y](ndeg);

Opacity

opacity: [0...1];

Stick to Compositor Only Properties: Web.Dev

Promote Elements

.moving-element {
  will-change: transform;
}

CSS Animation Properties

@keyframes [name]

defines styles for keyframes along

the animation sequence

@keyframes animation-set {
  from {
    transform: rotate(0);
  }
  
  to {
    transform: rotate(45deg);
  }
}
animation-name

declares the name of the

@keyframe to manipulate

<code /> animation1
#animation1 div{
  animation-name: animation-set-1;
}
animation-duration

the length of time it should take

for an animation sequence to

complete one cycle

<code /> animation2
#animation2 div:hover{
  animation-name: animation-set-2;
  animation-duration: 500ms;
}
animation-delay

the time between the element

being loaded and the start of the

animation sequence

<code /> animation3
#animation3 div:hover{
  animation-name: animation-set-3;
  animation-duration: 500ms;
  animation-delay: 500ms;
}
animation-timing-function

establishes preset acceleration

curves such as ease or linear

<code /> animation4
#animation4:hover div{
  animation-name: animation-set-4;
  animation-duration: 3s;
  animation-timing-function: ease-in;
}
animation-fill-mode

how an animation applies styles

to its element before and after

the animation is executed

<code /> animation5
#animation5:hover div{
  animation-name: animation-set;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
animation-iteration-count

the number of times the

animation sequence should be

performed

<code /> animation6
#animation6 div:hover{
  animation-name: animation-set;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
animation-direction

specifies whether the animation

should play forwards, in reverse,

or in alternating cycles

<code /> animation7
#animation7 div:hover{
  animation-name: animation-set;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
animation-play-state

allows you to play or pause

the animation sequence

<code /> animation8
#animation8 div{
  animation-name: animation-set;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#animation8 div:hover {
  animation-play-state: paused;
}
animation shorthand
<code /> animation9
#animation9 div{
  /* @keyframes duration | easing-function | delay | iteration-count | direction | name */
  animation: 3s ease-in-out 5s infinite alternate animation-set;
}

#animation9 div:hover {
  animation: paused;
}

It's Hacktoberfest time...

What are some things you could animate on your user card to *delight* visitors?

background color/gradient

#animation1 div {
  background: linear-gradient(
    -45deg,
    rgba(255, 159, 159, 1),
    rgba(130, 240, 200, 1),
    rgba(203, 166, 200, 1),
    rgba(255, 159, 159, 1)
  );
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

<code /> animation1

image filters

#animation2 div img {
  animation: img-filter 2s alternate infinite;
}

@keyframes img-filter {
  0% {
    filter: hue-rotate(0);
  }
  
  100% {
    filter: hue-rotate(360deg);
  }
}
<code /> animation2

card flip

<code /> animation2

check out the code from Rebecca Chumley's card and see how you might refactor to include animations instead of just transitions.

button click/hover events

<code /> animation2

play with box-shadow to make it look like the button is being pressed down when clicked

CSS Animations

By mjordancodes

CSS Animations

  • 72

More from mjordancodes