DEV Community

Full CSS animations guide which allows you to build amazing websites

Duomly on February 10, 2020

This article was originally posted at CSS Animations Cheatsheet Since we can create animations in CSS, building a stunning website with smooth ...

Read full post

GibboK • Feb 10 '20 • Edited

Hi Duomly, great article!

Just would like to mention two nice libraries for animations.
The first one based on CSS animations:

Animate.css: github.com/daneden/animate.css

The second based on Web Animations API which is basically a new JavaScript API for driving animated content on the web on which we no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction.

You can give it a try here (disclaim I wrote this library ):

Animatelo: github.com/gibbok/animatelo

jean-smaug • Feb 10 '20

Hello,

Thx for your article.

Tip : instead of the height property, I think it's possible to have the same behaviour with the transform: scaleY() property. For better performances ;)

keycdn.com/blog/animation-performa...

Robin Kretzschmar • Feb 11 '20

Animations were always those kind of tasks I avoided because I said to myself I simply wasn't good enough with this topic. After reading your amazing article, I see that I just didn't get the basic concept right and this gives me a fresh view on things to take another chance.

Thanks for the article! :)

Zachary Eskridge • Feb 11 '20

This is awesome! I've actually been really curious about animation for a while now. I got some Stack Overflow coffee a while back for a simple animation on my portfolio, but I didn't really understand it well enough to replicate. But it makes more sense now. Thanks! Great read.

Aslam Shah • Feb 11 '20 • Edited

Adding animation-direction: alternate; will make it cooler :)

James Sinkala • Feb 11 '20

Great article. Here is a css animation I created for my site:

Mahmudul Hasan • Feb 22 '20

Can you show me the code?

James Sinkala • Feb 23 '20

Here's a pen containing this - codepen.io/xinnks/pen/VwLmJjw

Kyle Griffin • Feb 10 '20

Hi Sharjeel. Can you upload the image to imgur instead? I may be able to quickly tell you what the issue is, but the CSS animation guide here is better suited to those who are building up their CSS manually and not through the use of a Wordpress Builder.

Evan Kapantais • Feb 11 '20

you could also do it like so, instead of typing out percentages.

@keyframe loading {
  from { height: 10px; }
  to { height: 29px; }
}

Artistdesignzpro • Feb 10 '20

Nice

Aleksandr Hovhannisyan • Mar 21 '20 • Edited

The animation in your demo could use some work. The timing/sync is noticeably off.