DEV Community

Vaibhav Tandon
Vaibhav Tandon

Posted on • Originally published at Medium on

4 3

VOV.CSS — The Intro

VOV.CSS — The Intro

Image from nicolapietroluongo.com

For implementing small animations we usually have to write many lines of code and being one of the lazy ones, I am not at all interested in writing the same CSS again and again for my all projects.

After facing such problems, I have an idea to create my own animation library. Yes, I know there are thousands out there, so why not add my own.

It is a small CSS library based on the implementations of the classes, all of the code is written using keyframes and thus easy to handle and easy to use.

VOV.CSS is really simple to use, all you need to do is to add the CSS files to your HTML file.

OR

You can also add the CDN in the head section of your HTML file.

After adding the CDN link or vov.css file to your HTML file, just add classes to your element’s class attribute, It is that simple.

Like this,

vov.css consists of approx 55+ different types of animating classes and still counting in https://github.com/vaibhav111tandon/vov.css.

Here are some of my favourite animations,

roll-out-left

shake-vertical

blur-out

You can do a whole bunch of other stuff with vov.css when you combine it with jQuery or add your own CSS rules which I use on a daily basis to make websites more interactive and beautiful.

Thank you

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay