a crash course in getting started with

CSS Animation

@mJordanCodes

Hello World!

I'm Jordan Brady, a creative front end

  • Front End Software Engineer at Brandwise

developer, mentor, and community leader.

  • Network Director for WWCode Boulder/Denver

@mJordanCodes

  • My two dogs: Cub and Pebbles
  • Everything CSS
  • Rubber Ducks

@mJordanCodes

Find me online

mjordan.codes

@mJordanCodes

Before I get started....

Please, interrupt me!

  • Ask questions
  • Share ideas and examples
  • Demand more information
  • Start a conversation
@mJordanCodes

What?

CSS Animations

CSS Animations make it possible to animate transitions from one CSS style configuration to another.

@mJordanCodes
@mJordanCodes

Why?

@mJordanCodes

Motion guides user attention in a smooth, unbroken fashion. When a UI changes appearance, motion provides continuity between the placement and appearance of elements before and after a transition...

@mJordanCodes
  • Relationships / Hierarchy
  • Cause and Effect
  • Feedback
  • Guide Users

Benefits of Motion

@mJordanCodes

When?

  Now that we have the why....

@mJordanCodes

Your portfolio is one of the only sites that you will build that is a complete creative expression of yourself with no constraints...

@mJordanCodes

A few things to keep in mind...

  • Less is more
  • Animations should have a clear purpose
    • Inform / communicate
    • Draw attention
    • Appear modern, up-to-date, and polished
    • Delight
@mJordanCodes

How?

  Now that we have the why and the when....

@mJordanCodes

How browsers render style

Style Calculations

Layout

Composite

Paint

@mJordanCodes

How browsers render style

1. Style Calculations

Once rules are known, they are applied and the final styles for each element are calculated.

This is the process of figuring out which CSS rules apply to which elements based on matching selectors

@mJordanCodes

How browsers render style

2. Layout

Because the web's layout model means that one element can affect others, this process can be quite involved

The browser can now calculate how much space it takes up and where it needs to be on the screen.

@mJordanCodes

How browsers render style

3. Paint

It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements.

Painting is the process of filling in pixels

Typically done onto multiple surfaces, often called layers.

@mJordanCodes

How browsers render style

4. Composite

Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly.

This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.

Worst things to Animate

@mJordanCodes

Layout Properties

Also Avoid

@mJordanCodes

Painting Properties

What can be Animated Cheaply?

@mJordanCodes
  • Position           transform: translate(npx, npx);

  • Scale                transform: scale(n);

  • Rotation          transform: rotate(ndeg);

  • Opacity            opacity: 0...1;

@mJordanCodes

How?

For real... HOW?! Show me the code!

@mJordanCodes
.simple-transition {
	transition: 1000ms;
}

.simple-transition:hover {
	border-radius: 100%;
}

@keyframes

  • a way to define "steps" your animation should take
@mJordanCodes
  • the most basic example uses a from and a to
@mJordanCodes
.simple-keyframes:hover {
  animation-name: simple-keyframe-animation;
  animation-duration: 5s;
}

@keyframes simple-keyframe-animation {
  from { border-radius: 0 0 0 0; }
  to { border-radius: 100% 100% 100% 100%; }
}
@mJordanCodes
.simple-keyframes:hover {
  animation-name: simple-keyframe-animation;
  animation-duration: 5s;
}

@keyframes simple-keyframe-animation {
  from { border-radius: 0 0 0 0; }
  to { border-radius: 100% 100% 100% 100%; }
}

animation-name --> matches the named @keyframes set

animation-duration --> how long the animation should take to complete

@keyframes

  • a way to define "steps" your animation should take
  • the most basic example uses a from and a to
@mJordanCodes
  • Can also use percents when you want more control / more steps
  • Can update multiple CSS properties in each step
@mJordanCodes
.percent-keyframes:hover {
  animation-name: percent-keyframe-animation;
  animation-duration: 5s;
}

@keyframes percent-keyframe-animation {
  0%   { border-radius: 0 0 0 0 }
  25%  { border-radius: 0 100% 0 0 }
  50%  { border-radius: 0 100% 100% 0 }
  75%  { border-radius: 0 100% 100% 100% }
  100% { border-radius: 100% 100% 100% 100% }
}

animation properties

@mJordanCodes
  • animation-name --> matches the named @keyframes set
  • animation-duration --> how long the animation should take to complete
  • animation-delay --> time between the element being loaded and the start of the animation
  • animation-direction --> defines if the animation should play forward, in reverse, or in alternating cycles
  • animation-iteration-count --> number of times the animation should be run
  • animation-play-state --> pause or play the animation
  • animation-timing-functions --> establishes preset acceleration curves (like ease or linear)
  • animation-fill-mode --> sets values to be applied before/after the animation

animation resources

@mJordanCodes
  • CSS Animation Rocks
    Weekly newsletter with articles, tips, and tutorials. Course: Level Up your CSS Animation
  • CSS Animation for Beginners
    Handy article with great visuals and code examples.
  • Animate.css
    CSS Animation library that makes it super simple to add fun animations to your site quickly.

a crash course in getting started with CSS Animation

By mJordan Brady

a crash course in getting started with CSS Animation

  • 42
Loading comments...

More from mJordan Brady