In Css, Animation is used to animate the one Css style configuration to another. we can change any css properties like background-color, color, position etc and as many times we want. which we can done with help of keyframes. we will not use jQuery , javaScript and flash.

Css3 Animation codeparadox

In this post we will learn about keyframes and we will make some basic animations like this.

See the Pen Css Animation by Suraj Sharma (@codeparadox) on CodePen.

above example will try to make you hypnotize.

Css Animation with Keyframes 

Keyframes at-rule is used to define the each animation, which control the steps in Css animation. It also defines what should happen at the specific moments during the animation.  we use @keyframes keyword before animation-name then we define what we will happen in animation-duration. for an example :

As you can see in the above example that animation name is Myanimation and here animation begins with 0% and ends with 100%, inside we changed the background color.

These keyframes can be control by its properties. which gives us more control over keyframes


Properties of keyframes

There are some keyframes properties :

  • animation-name  : it specifies the name of the keyframe which we can select to manipulate.
  • animation-duration : it specifies the time of the animation takes to complete. it takes values in milliseconds and seconds.
  • animation-timing-function  : it specifies the preset acceleration curves such as ease-in , linear or ease-out etc.
  • animation-delay : it specifies the time which element will take before start of the animation sequence.
  • animation-iteration-count : it specifies the number of time animation should be performed.
  • animation-direction : it specifies the direction of the animation which can be reverse or alternate-reverse.
  • animation-fill-mode : it specifies the values which are applied to the element will remain after animation or not.
  • animation-play-state : it specifies where the animation will running or paused.

In this next example we will try to use some of these properties.


See the Pen MVVQNy by Suraj Sharma (@codeparadox) on CodePen.

the best part :

We can use shorthand property,

The animation shorthand property is a comma-separated list of animation definitions. Each item in the list gives one item of the value for all of the properties of the shorthand, which are known as the animation properties.

We will learn more about animation and transition later.

you can visit MDN web docs  for documentation.


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: