Add animation to your skills bar using CSS

Similar Post

Learn to create your skill bar using CSS

Let’s add some basic animation to the skills bar from the post above. Also, let’s polish elements with some styles too.

Let’s discuss a few CSS rules that will be used to add animation.

This code will create an animation using @keyframes that you can use for containers.

Using scaleX you can scale the element on x-axis which is what we want for the skill bars.

@keyframes fill {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

Also, you need to set the transform-origin property to left. It will force the animation to start from left.

transform-origin: left;

Demo

Share this post