Google Developer Expert

Master of Ceremonies

Blogger

International Speaker

Spoken at 49 events in 17 countries

Angular Trainer

Community Leader

Angular In Flip Flops

Squash & Stretch + Anticipation

source

Follow through

source

Exaggeration

source

Composition

source

CSS Animations

CSS Animation

Animatable CSS

all background* border* bottom box-shadow clip clip-path color filter font* height left margin* mask* offset* opacity outline* padding* perspective* right text-decoration text-shadow top transform vertical-align visibility width z-index

timing function/easing

Move

<div class="circle base elastic"></div>

.base {
  animation: move 2s infinite;
}
.elastic { 
  animation-timing-function: 
    cubic-bezier(.8,-0.6,0.2,1.5);
}

@keyframes move {
  0% { 
    transform: translateX(-250px);
  }
  40%, 60% { 
    transform: translateX(50px);
  }
  100% { 
    transform: translateX(250px);
  }
}

Rotate

<div class="square base linear"></div>

.base {
  animation: spin 2s infinite;
}
.linear {
  animation-timing-function: linear;
}

@keyframes spin {
  to { 
    transform: rotate(1turn);
  }
}

Resize

<div class="circle base"></div>

.base {
  animation: size 2s infinite;
}

@keyframes size {
  0%, 40%, 100% {
    transform: scale(1);
  }
  25%, 60% {
    transform: scale(1.1);
  }
}

Fade

<div class="circle base elastic"></div>

.base {
  animation: fade 2s infinite;
}

@keyframes fade {
  0% { 
    transform: translateX(0px);
    opacity: 0;
  }
  40%, 60% { 
    transform: translateX(80px);
    opacity: 1;
  }
  100% { 
    transform: translateX(0px);
    opacity: 0;
  }
}

States & Transitions

States & Transitions

Special Keywords

Execution Order

time

Composition

animateChild

time

Stagger

time

Dynamic Selectors

class="container"

class="item"

query(selector)

Dynamic Selectors

query('.item')

class="container"

class="item"

Dynamic Selectors

query('.item:enter')

class="container"

class="item"

class="item"

Easing

Offset Delay

Parenting

Binding Values

Overlay

Application

Improved UX ✨

Immersive interactions

Better engagement

User happiness 😃

Influencers

@UX_in_Motion

@DavidKPiano

@sarah_edo

David Khourshid

Issara Willenskomer

Sarah Drasner

@rachelnabors

Rachel Nabors