CSS Animation Weekly
Posts
CSS Animation Weekly #72 - Creative strokes, animating borders, Vue.js animation examples

CSS Animation Weekly #72 - Creative strokes, animating borders, Vue.js animation examples

December 11, 2017

Loads to learn this week! We begin by animating strokes in SVG, then learn some of the challenges in animating borders. We also explore approaches to animating in Vue.js. Enjoy!

♥️

Donovan at CSSAnimation.rocks

Articles

Creative SVG Strokes Animation — tympanus.net

A creative strokes animation of a bike illustration powered by SVG and GSAP.

Animating Border — css-tricks.com

How hard can animating a border be? You might be surprised!

Vue.js Transitions & Animations: Production-Ready Examples — snipcart.com

Learn how to handle production-ready Vue.js transitions & animations with live CodePens, in-depth explanations, code snippets, and more.

Inspiration

A humble rotating sphere — codepen.io

A beautifully elegant approach to creating a 3D-style rotating sphere with CSS!

Catsomnia — codepen.io

It's not easy being an insomniac feline 🙀

Image loading effects — codepen.io

Neat use of pseudo-elements in these image loading examples!

Motorized — codepen.io

Cute use of animation in this CSS-only demo 🚗

Animation in the real world

Your 2017 Wrapped — 2017wrapped.com

Delightful animation throughout this Spotify website - see how much music you listened to last year!