Ads

We help in wordpress site design and developmet, contact us by completing the form.

CSS keyframe animation without using Javascript

Taimoor Sattar 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:

<div class="box-aa"></div>

Then in CSS file define the Keyframes and shape of class box-aa.

@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;
}

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:

<div class="box-bb"></div>

In the CSS file, paste the  code as follow:

@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;
}


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

👏

Ads

We help in wordpress site design and developmet, contact us by completing the form.

From Our blogs

Leave a comment

Leave a Reply

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


Recent Comments
    No comments found.