Interface Design

WK6: CSS Animation

Animation Introduction & Resources

Animation is a really important part of UX/UI Design, and can make or break an interface. Animation can improve an interface in many ways, and for many different reasons. Animations can:

There is a huge quantity of Animation resources you can find all over the internet, from relatively simple CSS Transition tutorials, all the way to complex Javascript and SVG animation techniques. Here are a few useful resources that the Teaching team recommends:

CSS Transitions

When we change a CSS property (such as text colour, background colour, opacity, etc.), we can transition that property so that it smoothly changes to the next. This property is very simple to add. For example, if we wanted to transition the text colour of a button over half a second (0.5 seconds), and the background colour of the button for the same amount of time, we can do the following code:

.button {
  background: #31572C;
  color: #ECF39E;

  /* Here's our transition: */
  transition: color 0.5s, background 0.5s;
}

/* We'll add a hover effect to our button to see the effects of the transition. */
.button:hover {
  background: #ECF39E;
  color: #132A13;
}

See the Pen CSS Transitions by Liam Sheppard (@liamsheppard) on CodePen.dark

The above should be quite easy to understand. We’re transitioning two properties, and separating both properties with a comma. We can also add two other properties to this: the timing function (Also called “Easing”), and transition delay (The amount of time before the transition happens). We can combine all four of these properties into a single line once again. To make the code easier for us to read, we can put them on multiple lines if we want.

The shorthand code for adding multiple properties is to be written in this order:

transition: [property] [duration] [timing-function] [delay], [...repeat];

.button {
  transition:
    color 0.5s ease-out 0.2s,
    background 0.5s ease-out 0.2s;
}

The previous code will do what our first version did, but they will change the easing on the transition, as well as delaying the transition by 0.2 seconds. By default, transitions have a timing-function of ease-in-out, and a transition delay of 0 seconds. The easing options we can use for the Timing Function property are the following:

Keyword Values


Image source

Functional Values

These are easing curves based off the options we give inside the brackets.

Transition-able Properties

Some properties can’t be transitioned, such as display, or visibility. Here’s a handy list of the most commonly-used transition properties (There are many more not listed here):

Transforms

Sometimes we might want to transform an element when we animate it. The best way to achieve this is with a property called transform. We can use this property to move, resize, rotate, and skew an element. An important thing to remember when using multiple transforms, is that similarly to transitions, multiple transforms are added on the same line and separated with a comma.

translate

transform: translate() is probably the most common transform used. Translate in this context means to move an element. We can move an element relative to it’s current position. We usually do it along one of the two axis – x and y. One thing to note is that the y is flipped from what we normally see – -y is up, and y down.
The Axis
Image source

The code that we can use for translate is as follows:

div {
  /* This will move an element right 50pt, and down 100pt: */
  transform: translate(50pt, 100pt);

  /* This will move an element left 45pt: */
  transform: translateX(-45pt);

  /* This will move an element up 67pt: */
  transform: translateY(-67pt);
}

We can use transform: translate() in combination with jQuery .click() to make things such as hamburger menus:

See the Pen Hamburger by Liam Sheppard (@liamsheppard) on CodePen.0

/* Javascript */

$(document).ready(function(){
  $('.hamburger-button').click(function() {
    $('.hamburger').addClass('open');
  });
  
  $('.close').click(function() {
    $('.hamburger').removeClass('open');
  });
});
/* CSS */

/* There's more code needed to make the example shown, 
but this is the code that causes the Hamburger to slide out. */

.hamburger {
  transition: transform .5s;
  transform: translateY(-100%);
}

.hamburger.open {
  transform: translateY(0);
}

Transform, Rotate, and Skew

The other transforms we have access to are:

The following example shows how the all the transforms work, the last button shows how to combine multiple transforms.

To animate our transforms, our square has the line: transition: transform 0.5s ease;

The buttons in the example are simply using jQuery’s $('#square').click() and $('#square').toggleClass('class-name') from last week’s tutorial.

See the Pen Scale by Liam Sheppard (@liamsheppard) on CodePen.dark

Filters

Filters are a newer CSS property, and therefore aren’t supported on all browsers, (Remember that for Assignment 2, you’re allowed to use anything that’s supported on the latest version of Chrome!). If you do want to know if something is supported by a browser, you can visit Can I Use, and search for whatever feature you’re thinking of using.

Filters can also be very performance-intensive, so adding too many filters (especially the blur() filter) can result in the page not feeling smooth any more.

Here are the filters CSS supports:

Similar to the transform property, we set our transition on the element to transition: filter 0.5s;

See the Pen Filters by Liam Sheppard (@liamsheppard) on CodePen.0

Keyframe Animations

Sometimes we might want to make a more complex animation that we might not be able to do with CSS transitions. CSS Animations can do a few things that transitions can’t do, such as:

Animations are slightly harder to use than transitions, but they are still relatively simple. To create an animation, we need to give the element we’d like to animate some properties:

We can put all those properties into a single line, but it can get very long and confusing:
animation: [duration] | [timing-function] | [delay] | [iteration-count] | [direction] | [fill-mode] | [play-state] | [name]
(Don’t include the | when you write this, they simply mean ‘or’)

After setting the animation properties to the element we want to animate, we need to create our animation. This is quite simple, we create a new block named @keyframes animationName { }, inside this block, we then define the keyframes for our animation, we can use either from { } and to { }, or percentages, such as 0% and 100%, or anything in between.

.circle {
  animation-name: oranges;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.79, 0.02, 0.1, 0.99);
}

@keyframes oranges {
  0% {
    transform: translate(-200pt, 0) rotate(-90deg);
    border-radius: 0;
  }
  50% {
    transform: translate(0, -100pt);
    border-radius: 50%;
  }
  100% {
    transform: translate(200pt, 0) rotate(135deg);
    border-radius: 0;
  }
}

See the Pen oZVaNY by Liam Sheppard (@liamsheppard) on CodePen.dark

Keyframe animations, unlike transitions, will play when an item first appears on the page. We can use this in combination with jQuery to animate objects into the page:

See the Pen YZgROb by Liam Sheppard (@liamsheppard) on CodePen.dark

We can also make more complex animations pretty easily by playing with settings such as animation-delay:

See the Pen This was an accident by Liam Sheppard (@liamsheppard) on CodePen.dark

Other Animation Methods

What we covered isn’t everything! There are many more different ways to animate a webpage. We just covered the most simple. There are javascript libraries, SVG techniques, sprites, and more, all depending on what you want to create. Here’s some inspiration (Note, some might be a bit above your skill level! This is just to show what’s possible on the web):

Exercises

Take this zip and make each of the three juggling balls animate with a unique animation. Have the animation applied by using .toggleClass() and .click() when the user clicks on the toggles. Be sure to update and transition the toggles to a new ‘active’ style so the user has appropriate feedback to understand the result of their interaction.

Three possible animations are

Juggling Animation Exercise Example Solution