How To Animate Using CSS

CSS is able to create basic animations can be seen as a starting point for any amateur who wants to create websites that provide a better user experience.
In this post, I will be talking about how one can get animations using just CSS and simple shapes like squares, triangles, and circles.

@keyframes

@keyframes is the main component of CSS animations. It is THE CSS rule where animations are created.
To make CSS animations work @keyframes is first defined and then bound to a selector.

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called the animation property, like so:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

Animation using CSS

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property or its eight sub-properties, to give more control over how those keyframes should be manipulated.

Sub-properties

  • animation-name: declares the name of the @keyframes at-rule to manipulate.
  • animation-duration: the length of time it takes for an animation to complete one cycle.
  • animation-timing-function: establishes preset acceleration curves such as ease or linear.
  • animation-delay: the time between the element being loaded and the start of the animation sequence.
  • animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
  • animation-iteration-count: the number of times the animation should be performed.
  • animation-fill-mode: sets which values are applied before/after the animation.For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.
  • animation-play-state: pause/play the animation.

These sub-properties can then be used like so:

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

Square To Circle

Let’s create a simple shape transition; a square to circle animation using the above principles. We will have five stages in total and for each stage, we will define a border-radius, a rotation, and a different background color to our element.

HTML:

<div class="element"></div>

CSS:

.element {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1.5);
    background-color: yellow;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

 

Square to Circle CSS

Multiple Animations

To add multiple animations, just use a comma separator!

@keyframes fade {
  to {
    opacity: 0;
  }
}
@keyframes rotate {
  to {
    transform: rotate(180deg);
  }
}
.element {
  animation: fade 2s 1s infinite linear alternate,
             rotate 2s 1s infinite linear alternate;
}

Adding Vendor Prefixes

This is actually very important when we add CSS animations. Say you have designed a website full of animations and other stuff that gives a rich user experience. You open it on Chrome and Voila! It works perfectly! But when you open it on Firefox, the animations have crashed!

To avoid this from happening, a developer needs to add vendor prefixes.

The standard prefixes applied are:

  • Chrome & Safari: ~webkit~
  • Firefox: ~moz~
  • Opera: ~o~
  • Internet Explorer: ~ms~

Code will now look like this:

.element {
    -webkit-animation: fade 4s 1s infinite linear alternate;
    -moz-animation: fade 4s 1s infinite linear alternate;
    -ms-animation: fade 4s 1s infinite linear alternate;
    -o-animation: fade 4s 1s infinite linear alternate;
    animation: fade 4s 1s infinite linear alternate;

If we add @keyframes ,

@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@keyframes fade { /* your style */ }

Performance

Animating most properties is a performance concern, so we should proceed with caution before animating any property.

However, there are certain combinations that can be animated safely:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity