Fundamentals of CSS Animations - SimonFinney/creative-coding GitHub Wiki

In this section, we’ll go over some of the key ingredients for building out animations for the web. Animations can be applied to most CSS properties - we’re going to nail down the basics of these 3 areas:

Transform

CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position - CSS3 supports 2D and 3D transformations.

You will learn about the following transformation methods:

  • translate()
  • scale()
  • rotate()
  • skew()

The translate() method

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

For example, to translate an element from its current position forwards along the X-axis 24 pixels:

.element {
  transform: translateX(24px);
}

The scale() method

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

For example, to scale an element to half of it's original size:

.element {
  transform: scale(.5);
}

The rotate() method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

For example, to rotate an element 90 degrees clockwise:

.element {
  transform: rotate(90deg);
}

The skew() method

The skew() method skews an element along the X and Y-axis by the given angles.

For example, to skew an element 22.5 degrees along the X-axis:

.element {
  transform: skew(22.5deg, 0);
}

Task

  1. Fork the CodePen at ibm.biz/cc-transform
  2. When hovering over each button, try applying different transformation methods
  3. See if you can apply the following transformation methods:
  4. The translate() method
  5. The scale() method
  6. The rotate() method
  7. The skew() method

Resources

Transition

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration. To create a transition effect, you must specify at least two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

Note: If the transition-duration property is not specified, the transition will have no effect, because the default value is 0.

For example, to apply a 1 second ease transition to the opacity of an element that's being hovered over:

.element {
  opacity: 1;
  transition-duration: 1s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.element:hover {
  opacity: .75;
}

Task

  1. Fork the CodePen at ibm.biz/cc-transition
  2. When hovering over each button, try applying different transitions
  3. See if you can apply transitions to the following transformation methods:
  4. The translate() method
  5. The scale() method
  6. The rotate() method
  7. The skew() method
  8. Experiment with transitioning other CSS properties - CSS Reference

Resources

Animation and keyframes

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

An animation lets an element gradually change from one style to another - You can change as many CSS properties you want, as many times you want.

Keyframes

To use CSS3 animation, you must first specify some keyframes for the animation - Keyframes hold what styles the element will have at certain times.

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

For example, to define a keyframes rule for an animation named bounce that scales to .8 of an element's original size halfway through the animation:

@keyframes bounce {

  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1);
  }
}

Animation

Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.

For example, to apply the bounce animation to an element for 1 second continuously:

.element {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: bounce;
}

Task

  1. Fork the CodePen at ibm.biz/cc-animation
  2. Copying the @keyframes template rule, see if you can create keyframes and apply animations for the following:
  3. A bounce animation
  4. A shake animation
  5. A swing animation
  6. Feel free to sketch out your ideas beforehand
  7. Experiment with animating other properties - CSS Reference

Resources

References