Ex05: CSS Animation

View Exercise 5 Screencast (Part 1: Intro)
View Exercise 5 Screencast (Part 2: Step-by-Step)

Animation

Animation is an optical illusion whereby sequences of still images flashed before the eyes are perceived by the brain to be connected, creating a sense of fluid motion.

Conventional film-based animation displayed stills at a rate of 24 frames-per-second (fps). Modern digital video is commonly shot at 24 fps to simulate a cinematic feel, 30 fps, or 60fps.

Digital animation created in apps like Adobe Animate or After Effects, or ToonBoom can be set at many different rates. Simple animation might be adequately replayed at as low as 5 fps, but 12 is considered a more common minimum. If the frame rate is too low for a given sequence, the illusion will be lost at the playback will appear stroboscopic or flickering.

Traditionally, senior animators would draw “key” frames of an animation, and junior animators would draw the in-between frames, or “tweens”. CSS is similar shares that concept with other animation apps. You set the keyframes, and the CSS works with the browser to create the tweens.

For more than a century, animators have been guided by Disney’s 12 Principles of Animation. Animation that includes these visual qualities aides our suspension of disbelief so that we can empathize with otherwise inanimate objects and illustrated characters. See “Understand Disney’s 12 Principles of Animation” from creativebloq.com.

CSS Animation

  • CSS Animation uses only HTML and CSS that you are already familiar with.
  • Animation can be used to provide visual feedback on interactive elements including nav links and buttons.
  • Any HTML element can be made to change over time (position, scale, rotation…)
  • Any motion (or sound) on a web page should be added with consideration to accessibility and user experience. See Nielson/Norman Group article on “Executing UX Animations: Duration and Motion Characteristics“
  • Other options for adding motion to the web
    • JavaScript
    • SVG
  • Examples of types of animation, from Daniel Eden.
    (View and use the CSS source code. Be sure to credit the original source.)

Simple CSS animations include:

  • a keyframes rule
  • an animation name to refer to
  • a class to which can be added HTML elements that are to be acted upon

Keyframe Rules

Keyframe rules are a list of actions that describe what properties will change and when over time. Keyframes can be declared as points along a timeline either using the keywords from and to; or by using a percentage.

In this example, drive is the name of the animation that will be created. The from point is 0, or the object’s current position. The property that will be changed is transform and the attribute is translateX to a value of 400px. In other words, the object will begin movement from it’s original location to a point 400px along the X axis.

@keyframes drive {
   from {transform: translateX(0);}
   to {transform: translateX(400px);}
}

Percentage measurements are useful when animating among more than two states.

@keyframes drive {
   0% {transform: translateX(0);}
   30%  {transform: translateX(50px);}
   100% {transform: translateX(400px);}
}

Assigning the Animation to an HTML Element

A class which calls a keyframe rule can be assigned to an HTML element. The class can contain a number of properties (see below.)

.car {
    animation-name: drive;
    animation-duration: 2s;
    animation timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

Animation Properties

  • animation-name
    used to refer a CSS rule to a keyframe rule
  • animation-duration
    accepts values in seconds (s) and milliseconds (ms)
  • animation-timing-function: ease-in or ease-out
    Easing is the way speed is distributed across the duration of an animation
  • animation-iteration-count
    determines the number of times the animation will loop
  • animation-delay
    accepts values in seconds (s) and milliseconds (ms)
  • animation-fill-mode: forwards, backwards, or both
    Retains the objects style and returns it to either the first keyframe (backwards) last keyframe (forwards) or retains the styles at both keyframes (both.) Can be use to reset the objects position.

For a complete list, see MDN’s List of Animated Properties.

Instructions

Part 1: Animate the gallery thumbnails outwards along the x axis 100px

  1. Download the Ex05 Template Files. (On a Mac, if your browser does not automatically expand the .zip archive, double-click on it to extract the folder. On Windows, select the downloaded .zip archive and click the Extract button at the top of the File Explorer window.) Add your last name to the beginning of the folder name.
  2. Locate the section prepared for Animation rules in the style.css file, just before the media queries begin. (Location within the file is not important — we’ll just put them here for organization.)
  3. Copy the below CSS class and paste into style.css in the Animation section:
    .moveLeft {
    animation-name: moveLeft;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;}
  4. Copy and paste this keyframe rule into your CSS:
    @keyframes moveLeft {
    from {transform: translateX(0);}
    to {transform: translateX(-100px);}
    }
  5. Create the appropriate code for .moveRight
  6. Add the classes .moveLeft and .moveRight to the appropriate gallery thumbnail imagesimg tags.
  7. Save and test your gallery page.

Part 2: Animate each thumbnail to roll slightly inwards then outwards on hover

  1. Duplicate the CSS rules from part 1 by copying and pasting into new lines.
  2. Change the name of the keyframe rules to moveLeftRotate and moveRightRotate.
  3. Add the :hover pseudo class to the CSS rule  (e.g. .moveLeftRotate:hover)
  4. Also in the CSS rule, change the duration to 2s, and the timing-function to ease-in-out.
  5. Change the <img> class name to moveLeftRotate and moveRightRotate
  6. Test your animation so far in a browser
  7. Replace your .moveLeftRotate keyframe rule with the code below to add .5 rotation as the thumbnail moves 20px inward, out -250px at the 60% mark rotating 2x, then back to the starting point at the 100% mark, rotating in the opposite direction. Create a keyframes rule for .moveRightRotate making the necessary adjustments.
    @keyframes moveLeftRotate {
    20% {transform: translateX(20px) rotate(0.5turn);}
    60% {transform: translateX(-250px) rotate(-2turn);}
    100% {transform: translateX(0px) rotate(2turn);}
    }

Part 3: Add a FadeIn Effect to Nav Link Hovers

  1. Add a keyframes rule and alter the CSS rule for nav li a:hover.
  2. Add a background-color to a:hover.
  3. Hint: the animation will use an opacity change from 0 to 1.
  4. Try a duration of 1s.
  5. Click to see the final code.
    nav li a:hover {
    color: #d5d7ff;
    text-decoration: underline;
    font-weight: normal;
    background-color: red;
    animation-name: fadeIn;
    animation-duration: ?;
    }

    @keyframes fadeIn {
    from {?: ?;}
    to {?: ?;}
    }

CSS Transitions

While the above keyframe based CSS animations provide great flexibility and creative opportunities, CSS3 Transitions can be used to quickly apply direct manipulations between two states of an object.

For more details, see MDN’s “Using CSS transitions“.

Submit

Upload your completed Exercise 5 folder to Box. Make sure the folder name begins with your last name.