CSS - How to animate 🚀

January 11, 2021

How to bring life in a webpage ? 🤔

“Animation is about creating the illusion of life.” Brad Bird

By animating information onto the page, we give our viewers an extra piece of information that might otherwise be missing. The animation both draws attention to the new content being added and gives context to that new information.

Animation can convey information efficiently, or it can be used to grab attention but in the end it is all about communication.

Movement in our designs gives us a more powerful way to communicate. It transcends verbal and written language.

Subtle and appropriate animation can add appeal to our designs and credibility to our work. This happens because as humans we’re used to seeing movement all the time in the “real” world. Bringing some of that life into our work brings the two closer.

Animation brings us two main benefits: conveying information and grabbing attention. We can come up with many ways these benefits can help us as we build for the web. Animation properties Animatable properties

CSS ANIMATIONS in ACTION

CSS animations provide even finer control over the intermediate steps between an animation, using waypoints. Waypoints (or @keyframes) are pinned points in time, during the animation, when we apply certain styles to an element. We then use the defined @keyframes to lay out what the animation should look like.

Suppose we want an element to animate as a bounce. The element needs to move up, move back to the original position, move back up a little, and then move back to the original position. Using keyframes, we can break down that elastic effect into percentages of time that the animation will take....

👉 An animation is applied to an element using the animation property.

.container {
  animation: rotate 10s linear infinite;
}

rotate is the name of the animation, which we need to define separately. We also tell CSS to make the animation last 10 seconds, perform it in a linear way (no acceleration or any difference in its speed) and to repeat it infinitely.

You must define how your animation works using @keyframes. Example of an animation that rotates an item:`

@keyframes rotate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

👉 Inside the @keyframes definition you can have as many intermediate waypoints as you want.

👉 CSS will make the transform property to rotate the Z axis from 0 to 360 grades, completing the full loop.

👉 You can use any CSS transform here.

Notice how this does not dictate anything about the temporal interval the animation should take. This is defined when you use it via animation.

A CSS Animations Example

Transitions

CSS transitions provide a way to control how fast a change in CSS property is applied to an element. Instead of applying a style immediately (without transitions), it could be applied gradually over a defined acceleration curve using customization rules. An example would be changing a background color from black to white over a period of time.

transition-property: background-color;
transition-duration: 3s;

With this rule on the element, the background color would take three seconds to change, gradually changing from black to white, going through shades of gray. This can further be customized by adding transition-timing-function, to calculate intermediate values, and transition-delay, to delay the start of the animation.

CSS transitions are good for simple interactions, such as changing the background color or moving an element to a new location.

Browsers used to be much more simple. It wasn’t so long ago that they couldn’t render images or handle more than a handful of fonts. Then CSS gave us power over how web pages look and feel.

Animation in browsers isn’t new. Flash, Canvas and other JavaScript options have given us ways to animate but recently CSS has become a viable option.

Transitions

The CSS animation properties

CSS animations offers a lot of different parameters:

👉 Properties

animation-name - the name of the animation, it references an animation created using @keyframes

animation-duration - how long the animation should last, in seconds

animation-timing-function - the timing function used by the animation (common values: linear, ease). Default: ease

animation-delay - optional number of seconds to wait before starting the animation

animation-iteration-count - how many times the animation should be performed. Expects a number, or infinite. Default: 1

animation-direction the direction of the animation. Can be normal, reverse, alternate or alternate-reverse. In the last 2, it alternates going forward and then backwards

animation-fill-mode - defines how to style the element when the animation ends, after it finishes its iteration count number. none or backwards go back to the first keyframe styles. forwards and both use the style that’s set in the last keyframe

animation-play-state if set to paused, it pauses the animation. Default is running

The animation property is a shorthand for all these properties, in this order:

.container {
  animation: name duration timing-function delay iteration-count direction
    fill-mode play-state;
}

This is the example we used above:

.container {
  animation: spin 10s linear infinite;
}`

JavaScript events for CSS Animations

with JavaScript you can listen for the following events:

  • animationstart
  • animationend
  • animationiteration

🛑 Be careful with animationstart, because if the animation starts on page load, your JavaScript code is always executed after the CSS has been processed, so the animation is already started and you cannot intercept the event.

👇 in the index.js or whatever the name of your file 

const container = document.querySelector('.container')
container.addEventListener(
  'animationstart',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationend',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationiteration',
  (e) => {
    //do something
  },
  false
)

Up next