DEV Community

Cover image for Full CSS animations guide which allows you to build amazing websites

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 ...
Collapse
 
gibbok profile image
GibboK • 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

Collapse
 
jeansmaug profile image
jean-smaug

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...

Collapse
 
darksmile92 profile image
Robin Kretzschmar

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! :)

Collapse
 
zace118 profile image
Zachary Eskridge

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.

Collapse
 
hunzaboy profile image
Aslam Shah • Edited

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

Collapse
 
xinnks profile image
James Sinkala

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

Collapse
 
mhasan profile image
Mahmudul Hasan

Can you show me the code?

Collapse
 
xinnks profile image
James Sinkala

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

Collapse
 
kylefilegriffin profile image
Kyle Griffin

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.

Collapse
 
evankapantais profile image
Evan Kapantais

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

@keyframe loading {
  from { height: 10px; }
  to { height: 29px; }
}
Collapse
 
artistdesignzp1 profile image
Artistdesignzpro

Nice

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

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