CSS Animations

CSS animations enable us to make dynamic content without using JavaScript. This is done by gradually changing one or more CSS properties of an element over a given period of time. Since no extra scripts are required to achieve these animations effects, CSS animations will not slow down your web pages.

In order to use CSS animations, you must first specify some keyframes for the animation. These keyframes define the styles an element will have at certain times.

The @keyframes Rule

The @keyframes rule defines what happens at specific moments during the animation and includes the animation name, animation breakpoints and the properties intended to be animated.

Syntax

@keyframes animation_name {animation_breakpoints {css-styles;}}

Different keyframe breakpoints are set using percentages, starting at 0%  up to 100% with intermediate breakpoints if needed. The keywords “from” and “to” can also be used in place of 0% and 100%. The element properties to be animated are listed inside each of the breakpoints. 

animation-name property

This is used to assign the animation name declared in the @keyframes rule to the element which the animation is to be applied to. The animation-name property takes on a value of the animation name identified from the @keyframes rule.

animation-duration property

Specifies the length of time it takes for an animation to complete one cycle. The duration may be set in seconds or milliseconds

animation-timing-function property

Establishes the acceleration curves for the animation and can have values of:

  • ease – This the default value where an animation starts slowly, then moves fast in the middle and slows down towards the end then end.
  • linear – The animation has the same speed from start to end
  • ease-in – The animation starts slowly and then speeds up as it ends.
  • ease-out – the animation starts quickly and goes on slowing down as it ends.
  • ease-in-out – The animation starts slowly, speeds up in the middle and slows down again towards the end.
  • cubic-bezier(n,n,n,n) – Lets you define your own values in a cubic-bezier function

animation delay property

the time between the element being loaded and the start of the animation sequence.

animation-direction property

Sets the direction of the animation after a cycle. Its default resets on each cycle. The animation-direction property can take on values of values of;

  • normal – This is the default value and the animation is played normally from beginning to end.
  • reverse – The animation is played opposite to the breakpoints identified within the @keyframe rule, that is, from 100% to 0%.
  • alternate – The animation is played forwards first, then backwards. Within the keyframes that includes running forward from 0% to 100% and then backwards from 100% to 0%.
  • alternate-reverse – The animation is played backwards first, then forwards

animation-iteration-count property

Specifies the number of times the animation should be performed.  The animation-iteration-count property can take on a value of:

  • a number – repeat the animation as many times as specified by the number. The default value is 1
  • infinite – means the animation will run forever

animation-fill-mode property

This property defines a style for the target element when the animation is not playing, that is, before it stars and after it ends. This is because CSS animations do not affect an element before and after the keyframes are played.
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.

The animation-fill-mode property can have the following values:

  • none – This is the default value where no styles will be applied to the element before or after it has been executed.
  • forwards – The element will retain the style values that are set by the last specified keyframe. These styles may, however, be affected by the animation-direction and animation-iteration-count properties since these change exactly where an animation ends.
  • backwards – The element will get the style values set by the first keyframe and also includes applying those styles during any time that may be set within an animation delay. This value may also be affected by the animation-direction property value.
  • both – The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

animation-play-state property

The animation-play-state property allows an animation to be played or paused using the running and paused values respectively.

When you play a paused animation, it will resume running from its current state rather than starting from the very beginning again.

The example below demonstrates how to use the various animation properties 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS Transitions</title>
	<style> 
		div {
		  width: 60px;
		  height: 60px;
		  border-radius: 50%;
		  background-color: #76BFC4;
		  position: relative;
		  animation-name: example;
		  animation-duration: 4s;
		  animation-iteration-count: infinite;
		  animation-direction: alternate;
		  animation-fill-mode: both;
		}

		@keyframes example {
		  0%   {left:0px; top:0px;}
		  33%  {left:400px; top:0px;}
		  66%  {left:200px; top:200px;}
		  100% {left:0px; top:0px;}
		}
		.container{
			width: 500px;
			height: 300px;
			margin-left: 20px;
		}
                div:hover {
                      animation-play-state: paused;
                }
    </style>
</head>
<body>
        <div></div>
</body>
</html>

Output

CSS Transitions

Whenever you hover over the moving circle, it pauses. This because the animation-play-state property has a value of pause.

animation property

This is a shorthand format used to write out values for the various animation properties at once instead of using multiple declarations.

Values for the animation property are given in the order;
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and lastly animation-play-state as shown by the syntax below 

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

No commas are placed between values unless you are declaring multiple animations then you have to comma-separate the values of each animation. 

For example the animation effect from the CSS animation properties below

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

can be achieved using the shorthand animation property below.

div {
animation: example 5s linear 2s infinite alternate;
}

The example below shows how we can achieve a sliding effect using the shorthand animation property

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Animations</title>
<style> 
div {
  height: 50px;
  width: 50px;
  background-color: #76BFC4;
  animation: slide 5s linear infinite alternate;
  border-radius: 50%;
}

@keyframes slide {
  0%, 100% {transform: translate(150px, 0);}
  50% {transform: translate(300px, 0);}
  80% {transform: translate(0, 0);}
}
</style>
</head>
<body>

      <div></div>
</body>
</html>

Output

CSS Animations

A CSS property is animatable only if its value is able to change over a given period of time for example color, width, height and others. Therefore not all CSS properties can be animated. You can find a list of animatable CSS properties at MDN