Similar Post
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
animation examples keyframes sass skill bar style