CSS Animations

CSS animations also known as CSS3 animations allow you to add animation to HTML elements without any need of using javascript. An animation allows HTML element to gradually change its styles. You can add any number of CSS properties to any number of times as you like while adding animation.

@keyframes

To define animation, you will need to set the keyframes. The keyframes hold different CSS styles that you want to apply on the element at different times during the animation. The keyframes must have a name which is then added to HTML element using CSS properties animation-name along with the animation-duration which defines the transition period. The default value for animation-duration is 0, so, no animation will appear if it is omitted.

Here is an example of an animation.

<div class="demo"></div>

<style>
@keyframes firstDemo {
  from {background: #ff0022;}
  to {background: #151f28;}
}

.demo{
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: firstDemo;
  animation-duration: 4s;
}
</style>

The keyframe above defines the background color to be changed from red to black using keywords "from" and "to" which represents the initial state(0%) and the end state(100%).

You can also add multiple states between the start and the end using different percentage values followed by some styles as shown below.

<div class="demo1"></div>

<style>
@keyframes secondDemo {
  0%   {background-color:red; left:0px;}
  50%  {background-color:blue; left:200px;}
  100% {background-color:red; left:0px;}
}

.demo1{
  width: 100px;
  height: 100px;
  background: #151f28;
  position: relative;
  animation-name: secondDemo;
  animation-duration: 4s;
}
</style>

Animation Iteration Count

CSS property animation-iteration-count allows you to define the number of times the animation is repeated within the defined animation duration. The value infinite can be used to make the animation run continuously without stopping.

<div class="demo2"></div>

<style>
@keyframes secondDemo {
  0%   {background-color:red; left:0px;}
  50%  {background-color:blue; left:200px;}
  100% {background-color:red; left:0px;}
}

.demo2{
  width: 100px;
  height: 100px;
  background: #151f28;
  position: relative;
  animation-name: secondDemo;
  animation-duration: 4s;
  animation-iteration-count: 4;
}
</style>

Animation Direction

CSS property animation-direction can be used to define the direction of the animation specifying either to run from start to end or vice-versa. You can also make the animation run in alteration from start to end then end to start and again start to end and so on.

Here are the optional values for animation-direction.

normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards

Here is an example for animation-direction property.

.demo2{
  width: 100px;
  height: 100px;
  background: #151f28;
  position: relative;
  animation-name: secondDemo;
  animation-duration: 4s;
  animation-iteration-count: 4;
  animation-direction: reverse;
}

Animation Timing Function

CSS property animation-timing-function can be used to define the speed curve for the animation. The values accepted by animation-timing-function are ease, linear, ease-in, ease-out, ease-in-out and cubic-bezier() which you learnt in the previous chapter CSS transitions and transforms.

.demo2{
  width: 100px;
  height: 100px;
  background: #151f28;
  position: relative;
  animation-name: secondDemo;
  animation-duration: 4s;
  animation-iteration-count: 4;
  animation-direction: reverse;
  animation-timing-function: ease-in-out;
}

Animation Fill Mode

By default, CSS animation styles do not affect HTML elements before and after the animation which can be overridden using CSS property animation-fill-mode. It is used to define styles for HTML elements before and after the animation.

The values for animation-fill-mode are as follows.

none - Default value. No styles applied to the element before or after the animation.
forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

.demo2{
  width: 100px;
  height: 100px;
  background: #151f28;
  position: relative;
  animation-name: secondDemo;
  animation-duration: 4s;
  animation-iteration-count: 4;
  animation-direction: reverse;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

Animation Shorthand Property

CSS allows you to use shorthand property for animation as well. Here is an example of shorthand for CSS property animation.

.shorthand{
  animation-name: demo;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
// shorthand (6 values)
.shorthand{
  animation: demo 5s linear 2s infinite alternate;
}
// Alternate
.shorthand{
  animation-name: demo;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
// shorthand (3 values)
.shorthand{
  animation: demo 5s infinite;
}

You can download CSS animation collection here.

Note: CSS animations are not good enough for web pages unless you add them on the top section of the page and make it visible instantly as the page loads because they will be played right after the web page loads. You can use it along with javascript though which detects the page scroll value and loads animations once users reach the section where the animation is added.

Wow Jquery serves you with great and easy CSS animations that will initiate only when users reach that section where animation is added through scrolling.

2 Likes 2 Dislikes 0 Comment Share Tweet