CSS Transitions & Animations

feat. Mark (or Kram if you spell it backwards)

Transitions

Transition syntax:


div {
 transition: background-color 2s ease 1s;
}

Super basic transition on hover

Transition applied to hover state only with one property being transitioned. Marky no likey.


.block {
  display: block;
  width: 300px;
  height: 300px;
  background: $red;

  &:hover {
    background: $blue;
    transition: background-color 2s ease;
  }
}

Element hover transition but better

Transition applied to element which allows for easing of multiple properties when hovering on and off. This Marky likey.


.block {
  display: block;
  width: 300px;
  height: 300px;
  background: $red;
  transition: all 2s ease;

  &:hover {
    background: $blue;
    border-radius: 100px;
  }
}

Element hover staggered transition

Transition property accepts multiple property specifications.


.block {
  display: block;
  width: 300px;
  height: 300px;
  background: $red;
  transition: background-color 1s ease,
              border-radius 2s ease 1s;

  &:hover {
    background: $blue;
    border-radius: 100px;
  }
}

A real world scenario (kinda)

I heard you like transitions. So I put transitions on your transitions with more transitions. But really I just am transtioning between multiple states with loads or properties.


a {
  display: block;
  padding: 20px 30px;
  color: $white;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba($black, 0.2);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba($black, 0.2);
  background: $red;
  transition: all 0.4s ease;

  &:hover {
    background: lighten($red, 5);
    box-shadow: 0 10px 40px rgba($black, 0.4);
    transform: translateY(-4px);
  }

  &:active {
    color: rgba($white, 0.75);
    text-shadow: none;
    background: darken($red, 5);
    box-shadow: inset 0 0 30px rgba($black, 0.4);
    transform: translateY(-2px) scale(0.95);
  }
}

Let's get spooky!

You may be asking yourself...

Mark, but what can properties can be transitioned/animated? MDN has an extensive list made just for you!

Mark, why do hot dogs come 10 to a package while the buns come in packages of 8? Some mysteries should remain unsolved you silly silly goose.

Animations

Animation syntax:


@keyframes YOUR-DANK-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

div {
  animation: YOUR-DANK-ANIMATION 1s infinite;
}

Basic keyframe animation

Animation uses "from" and "to" to establish a start and end to a very simple keyframe animation.


@keyframes wiggle {
  from   { transform: rotate(-15deg); }
  to     { transform: rotate(15deg); }
}

.block {
  display: block;
  width: 300px;
  height: 300px;
  background: $red;
  animation: wiggle 1s infinite;
}

A better keyframe animation

Adding in "animation-direction: alternate;" tells the animation to run in reverse to make a complete seamless animation.


@keyframes wiggle {
  from   { transform: rotate(-15deg); }
  to     { transform: rotate(15deg); }
}

.block {
  display: block;
  width: 300px;
  height: 300px;
  background: $red;
  animation: wiggle 1s infinite alternate;
}

More advanced multiple steps animation

You can specify percentage stops in animation to do more advanced animations.


@keyframes rope-a-dope {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(100px, 0); background: $blue; border-radius: 40px; }
  50%  { transform: translate(100px, 100px); background: $yellow; border-radius: 100px; }
  75%  { transform: translate(0, 100px); background: $green; border-radius: 40px; }
  100% { transform: translate(0, 0); }
}

.block {
  display: block;
  width: 300px;
  height: 300px;
  background: $red;
  animation: rope-a-dope 4s infinite;
}

Random semi-related trick or X-TREME HACK

You can enable hardware acceleration via user system's GPU to increase animation performance. How??? Apply this to the element that is being transitioned or animated:


transform: translate3d(0, 0, 0);

Check out this link to learn even more.

Let's get fancy with transitions AND animations

What if we had some project where some SILLY DILLY of a designer wanted a flyout?! Using a tiny bit of jQuery and some CSS we can achieve this new UX pretty easily.


.flyout {
  transform: translateX(240px);
  opacity: 0;
  transition: all .5s ease-out;

  &.show {
    opacity: 1;
    transform: translateX(0);
    box-shadow: 0 0 70px rgba($black, 0.25);
  }
}

@keyframes approved {
  0%   { background: $white; color: $black; }
  50%  { transform: translate( 0, 0); color: $white; background: $green; border-bottom-color: $green; opacity: 1; position: relative;}
  100% { transform: translate( 80px, -40px) rotate(15deg); background: $green; border-bottom-color: $green; opacity: 0; position: absolute; }
}

@keyframes denied {
  0%   { background: $white; color: $black; }
  50%  { transform: translate( 0, 0); color: $white; background: $red; border-bottom-color: $red;}
  100% { transform: translate( 80px, -40px) rotate(15deg); background: $red; border-bottom-color: $red; opacity: 0; position: absolute; }
}

&.status {
  &.approved {
    animation: approved 1s forwards ease;
  }

  &.denied {
    animation: denied 1s forwards ease;
  }
}

That's all folks!

Go forth and animate all the things. Except for making snow fall in our app. Don't ever do this.