CSS keyframe animation without using Javascript

Taimoor Sattar author Posted on

CSS animation is a great way to create visual animation without using Javascript; for example animation of a star, object moving in a circle. In other words, CSS provides a fine control of how much time you want to do animation. To use CSS animation, you must first specify some keyframes for the animation. In this keyframe, we define the animation properties styles.

Recipe for CSS animation

CSS animations are made with of two basic ingredients. Keyframes Keyframes define the stages and styles of the animation. Animation Properties It assigns the @keyframes to a specific CSS element and defines how it is animated. This is the boring definition, let's look at some practical example

Practical Example

Stage 1 of animation

We will move step by step from beginner to more advanced animation. In order to practice, paste this code in Html file: [formatc lang="markup"]<div class="box-aa"></div>[/formatc] Then in CSS file define the Keyframes and shape of class box-aa. [formatc lang="css"]@keyframes boxmove{ 50% { transform: translateX(100%); } 75%{ transform: translateX(200%); } 100%{ transform: translateX(300%); } } .box-aa{ animation: boxmove 1s infinite; width: 80px; height: 80px; background-color: lightblue; border: 1px solid blue; padding: 10px 10px; }[/formatc] We are use class of box-aa to define the box and to define the animation we use this CSS line: animation: boxbounce 1s forwards. In this 1s means the time taken by the box to move from initial to final position. We can create as many keyframes and change as many styles as we want. Result of CSS animation of above code is as follow

  Stage 2 of CSS animation

Moving forward lets change gears. We will move the box in some different ways. We will move it infinitely, in a loop and change some more styles. In the HTML file, paste this line of code: [formatc lang="markup"]<div class="box-bb"></div>[/formatc] In the CSS file, paste the  code as follow: [formatc lang="css"]@keyframes boxmoverotate{ 50% { transform: translateX(150%) scale(0.5); } 75% { transform: translateX(150%) rotate(180deg) scale(0.5); } 100% { transform: translateX(300%) rotate(180deg); } } .box-bb{ animation: boxmoverotate 1.5s infinite forwards alternate-reverse; background-color: lightblue; border: 1px solid blue; width: 80px; height: 80px; padding: 10px 10px; }[/formatc] Result of CSS animation of above code is as follow

In the above code, animation: boxmoverotate 1.5s infinite forwards alternate-reverse; means move the box for 1.5s infinitely , in the forward direction and repeat th step where it ends.

In addition, we can use CSS library animate.css that have dozens of fun animations to get you started and use on your projects.

Once you have learned some basic example of CSS animation you can build really cool animation. If you like this post, Check out our similar post:

  • How to create a nice button.
  • Loading animation with CSS