CSS animation, Easier than we think.

Sometimes we want to make animation for a better user experience. There are a lot of tools, packages used to make animation. sometimes we need to understand JavaScript or Flash or other third-party packages to make animation.

meanwhile, CSS provides us an easy way to make awesome animation. Here we will try to learn about it.

So basically, we will animate HTML elements without using JavaScript or other third-party library.

Using CSS animation, we can animate an element gradually changing from one style to another, we can change CSS property as many times as we want.

Properties:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode

@keyframes
By putting CSS style inside @keyframes, we can define our animation, and that will gradually change from present style to a new style at a certain times.

<!DOCTYPE html>
<html>
<head>
<style> 
@keyframes example {
  from {background-color: green;}
  to {background-color: red;}
}

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  margin-bottom: 10px;
  border-radius: 50%
}


</style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>

</body>
</html>

The above code shows us, how @keyframes works with our styles. put the above code in your editor or online editor such as Jsfiddle and see the changes.

at first, the "circle" class will be "green" color, then it will change to "red" color.

inside @keyframes, we already provided "from" and "to" property. We can replace them with percent. Such as, "0%", "25%", "50%", "75", and "100%".

try below code to see the changes, I'm using Jsfiddle

<!DOCTYPE html>
<html>
<head>
<style> 
@keyframes example {
  0%   {background-color: green;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: red;}
}

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  margin-bottom: 10px;
  border-radius: 50%
}


</style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>

</body>
</html>

In the above code, we can see that color of the circle will be changed to green, yellow, blue, and red. Duration will be 4s.

animation-name:
This property used to indicates the @keyframe name.

@keyframes example { /* name "example" */
}

.circle {
  animation-name: example; /* indicates @keyframes name */
}

animation-duration:
It is a mandatory property. It defines how long it takes to complete the animation. Its default value is 0s so without defines, no animation will occur.

animation-delay:
This property will make sure, that your animation will be delayed to start.

update the "circle" class with below code to see the changes,

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s; /* animation will be deloayed for 2 seconds */
  margin-bottom: 10px;
  border-radius: 50%
}

Negative values are also allowed, if we use "-2" then it will start as if it had been playing for 2 seconds.

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
  margin-bottom: 10px;
  border-radius: 50%
}

we can add multiple style property for each period of time inside of a @keyframes. below code will change color alongside of position of each circle.

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  border-radius: 50%
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

animation-iteration-count:
It will define the number of times an animation should run.
below code shows us it will run the animation 3 times before it stops.

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
  border-radius: 50%
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

if we want that animation will stay forever then we need to use "infinite".

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: 50%
}

animation-direction:
it will define that animation would play backward or forwards. below are the values of animation-direction

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

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse; 
  border-radius: 50%;
}

animation-timing-function
It specifies the speed curve of animation.

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

.circle-1 {animation-timing-function: linear;}
.circle-2 {animation-timing-function: ease;}
.circle-3 {animation-timing-function: ease-in;}
.circle-4 {animation-timing-function: ease-out;}
.circle-5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<div class="circle-1">linear</div>
<div class="circle-2">ease</div>
<div class="circle-3">ease-in</div>
<div class="circle-4">ease-out</div>
<div class="circle-5">ease-in-out</div>

</body>
</html>

animation-fill-mode:
It specifies a style for the target element when the animation is not playing. Values of animation-fill-mode are

none - Default value. Animation will not apply any styles to the element before or after it is executing
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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
  border-radius: 50%
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<div class="circle-1"></div>


</body>
</html>

That's it. Seee ya.

Blog

CSS animation, Easier than we think.

Abdullah al Mubin

Join Our Newsletter. No Spam, Only the good stuff.

Related