This article was originally posted at CSS Animations Cheatsheet
Since we can create animations in CSS, building a stunning website with smooth ...
For further actions, you may consider blocking this person and/or reporting abuse
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
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...
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! :)
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.
Adding
animation-direction: alternate;
will make it cooler :)Great article. Here is a css animation I created for my site:
Can you show me the code?
Here's a pen containing this - codepen.io/xinnks/pen/VwLmJjw
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.
you could also do it like so, instead of typing out percentages.
Nice
The animation in your demo could use some work. The timing/sync is noticeably off.