CSS animations & effects cheat sheet

Rotate an element and any children a certain number of degrees.

Can use negative numbers to go backwards.

.dino {
  transform: rotate(-33deg);
}

Similar to position relative; will move an element around on the screen without affecting other elements.

The position is based on where the element is currently located.

.dino {
  /* Move rightwards 5em and no vertical movement */
  transform: translate(5em, 0);
}

Has companion functions to move only in one direction:

transform: translateX();
transform: translateY();

Grow or shrink an element and all its children.

1 is what the element currently is; .6 is smaller; 2.3 is bigger.

.dino {
  transform: scale(1.4);
}

Has companion functions to scale only in one direction:

transform: scaleX();
transform: scaleY();

/* Or combined together */
transform: scale(1.4, 3);

Skew an element horizontally and vertically.

.dino {
  /* Leaving the second value off will only skew horizontally */
  transform: skew(12deg);
}

Has companion functions to skew only in one direction:

transform: skewX();
transform: skewY();

Written on a single line, separated by a space.

.dino {
  transform: rotate(33deg) scale(1.4);
}

Multiple transforms—incorrect example

Multiple lines won’t work.

Only the second entry will be activated.

.dino {
  /* WRONG */
  transform: rotate(33deg);
  transform: scale(1.4);
}

Control the anchor point for where the transform occurs.

The default is in the complete centre of the element, aka center center

Similar to background-position: horizontal then vertical.

transform-origin: center center;
/* Top left corner */
transform-origin: left top;
/* Centre of the top edge */
transform-origin: center top;
/* 10px in from the left, 10px down from the top */
transform-origin: 10px 10px;
/* Centre horizontally, 10px up from bottom */
transform-origin: center calc(100% - 5px);

Transition all numerical properties that changed.

Lasting 1s

With linear easing (no easing).

.dino {
  transition: all 1s linear;
}

Transition only the background-color.

.dino {
  transition: background-color 1s linear;
}

Delay starting the transition for 2s

.dino {
  transition: all 1s 2s linear;
}

Written on a single line, separated by a comma.

.dino {
  transition: background-color 1s linear, color .5s linear;
}

linear, ease, ease-in, ease-out, ease-in-out

steps() — instead of a smooth transition, specific number of frames.

.dino {
  transition: background-position 1s steps(4);
}

Create your own with cubic-bezier()—Cubic Bezier Generator

Do not put transition in :hover—it won’t do what you expect.

.dino:hover {
  /* WRONG */
  transition: all 1s linear;
}

First component of an animation.

Name the keyframes whatever you’d like—following naming conventions.

@keyframes wiggle {}
@keyframes dance {}
@keyframes faderoo {}
@keyframes blabidy-boo {}

Use the start & end keywords.

@keyframes wiggle {

  start {
    transform: translateX(-2em);
  }

  end {
    transform: translateX(-4em);
  }

}

Use percentages to define the different animation keyframes.

@keyframes wiggle {

  0% {
    transform: translateX(0em);
  }

  40% {
    transform: translateX(-2em);
  }

  80% {
    transform: translateX(2em);
  }

  100% {
    transform: translateX(0em);
  }

}

Use the keyframes set named wiggle

Make the animation last 1s

Have linear (no) easing.

.dino {
  animation: wiggle 1s linear;
}

Delay starting the animation for 2s

.dino {
  animation: wiggle 1s 2s linear;
}

infinite — Animation iteration count: loop the animation keyframes infinite number of times.

Use a number to choose how many interations.

.dino {
  animation: wiggle 1s linear infinite;
}

.moon {
  /* Play the animation 5 times */
  animation: wiggle 1s linear 5;
}

alternate — Animation direction: play the keyframes forwards then backwards.

Directions: normal, reverse, alternate, alternate-reverse

.dino {
  animation: wiggle 1s linear alternate;
}

forwards — Animation fill mode: keep the animation on its last frame when complete.

Modes: forwards, backwards

.dino {
  animation: wiggle 1s linear forwards;
}

linear, ease, ease-in, ease-out, ease-in-out

steps() — instead of a smooth transition, specific number of frames

.dino {
  animation: wiggle 1s steps(4);
}

Create your own with cubic-bezier()—Cubic Bezier Generator

.dino {
  animation: dance 1s 2s 6 alternate;
}

Use the dance keyframes, play the animation for 1s, wait 2s to start the animation, loop the keyframes 6 times, and alternate the keyframe play direction forwards & backwards

Put animation in :hover to trigger when interacted with

.dino:hover {
  animation: dance .3s linear;
}

Will desaturate text, elements & images.

0% is no change, 100% is black & white.

Make sure to spell “gray” the American way.

filter: grayscale(42%);

Will blur text, elements & images.

Accepts a pixel number representing the blur radius.

filter: blur(7px);

Will adjust the brightness of text, elements & images.

100% is no change; 0% is completely black; over 100% is brighter.

filter: brightness(126%);

Will adjust the contrast of text, elements & images.

100% is no change; 0% is completely grey; over 100% is more contrast-y.

filter: contrast(78%);

Will adjust the colour saturation of text, elements & images.

100% is no change; 0% is completely black & white; over 100% is more saturated.

filter: saturate(258%);

Will convert text, elements & images to sepia tones.

0% is no change, 100% is completely sepia.

filter: sepia(88%);

Will add a drop-shadow to elements, text & images. It will see inside the image and add a drop-shadow around the non-transparent pixels.

Has the same values as the standard CSS text-shadow property.

Needs four properties: horizontal offset, vertical offset, blur radius, colour.

filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .5));

Multiple filters can be applied by separating with a space.

.dino {
  filter: contrast(120%) grayscale(100%);
}

Since the filters are numerical they can be animated!

.dino {
  filter: contrast(120%) grayscale(100%);
  transition: all .2s linear;
}

.dino:hover {
  filter: contrast(100%) grayscale(0);
}

Style an element when the URL matches the id of an element.

URL: https://dinos-r-us.ca/#stego

<h1 id="stego">Stegosaurus</h1>

#stego {
  background-color: yellow;
}

#stego:target {
  background-color: yellow;
}

<ul>
  <li><a href="#stego">Stegosaurus</a></li>
  <li><a href="#tri">Triceratops</a></li>
</ul>

<div class="dino" id="stego">…</div>
<div class="dino" id="tri">…</div>

.dino {
  border: 1px solid #e2e2e2;
}

.dino:target {
  border-color: #f33;
}

<a href="#dino">Go Dino, Go!</a>

<img id="dino" src="images/dino.svg" alt="Big Dinosaur">

#dino:target {
  animation: wiggle 1s linear;
}