CSS Animation Weekly
Posts
CSS Animation Weekly #127 - Best of 2018 and more

CSS Animation Weekly #127 - Best of 2018 and more

December 31, 2018

I hope you've had a great 2018 and looking forward to 2019. To celebrate, I've put together a special issue this week exploring the top links of the year!

I've also included load of really cool demos from the past week as usual.

Also, side note, I've just updated my CSS Animation 101 Github page to link to a Chinese translation, complete with web and ePub versions of the book.

If you're like to translate the book to your language, let me know!

♥️

Donovan at CSSAnimation.rocks

Level Up your CSS animation skills for just $9 per month! — courses.cssanimation.rocks

Begin 2019 with style by learning how to apply CSS animation to your websites. You can get this amazing 4-hour video course for just $9 per month (no minimum duration, cancel anytime).

Bring your website to life with animations, transitions, scroll effects, carousels and more.

Best of 2018

Animated SVG Radial Progress Bars

First up is this awesomely simple approach to creating animated radial progress bars! Dave's approach is simple and efficient and doesn't reply on any third party libraries.

Parallax scrolling with CSS variables

BasicScroll is a standalone parallax scrolling toolbox. You can attach whatever properties you like and it will elegantly animate the properties for you. One to bookmark!

Scrolling Letters Animation

Another scrolling-based trick. This time we're learning how to use the Intersection Observer API to detect scroll position and trigger a text animation. For this reason it works best in browsers that support it, such as Chrome.

Fullscreen Hover Loop Effect

Another popular article from Codrops. This time try hovering / clicking the "photography" link in the demo, revealing a fullscreen loop effect that shows a fast preview of images.

Should you use CSS or JavaScript for web animations?

Our 5th most popular link this year was an old question - CSS or JavaScript for web animations? Is one better than the other? Zell Liew shows how you can use both to produce smooth animations for your web site.