CSS Animation Weekly #105 — Radial progress bars in Vue, Stacking with CSS animation and more

Last week we were making animated menus with React, this week we’re looking at how to create animated progress bard with VueJS! We’re also hopelessly addicted to an amazing pure CSS stack game, and enjoying a load of cool inspiration.

♥️

Donovan at CSSAnimation.rocks


1*xecixqkai3ye77ax9ih2eg

Creating Animated Radial Progress Bars with SVG, CSS and VueJS — medium.com

Learn how to create awesome animated radial progress bars with VueJS!

Pure CSS Stack

codepen.io

This is amazing, a fully playable stack game created with CSS and HTML!

Featured

Meta poster a5e44e6a26dd8fbf07e1d3e65d1318638dabb236930660b17c53eb25ace70846

Keyframes — keyframes.net

If you’re looking for community, inspiration and ideas, check this out! Keyframes is the hangout spot for animators. Talk about your projects, ask questions, and learn from each other.

Inspiration

Large

The handbook download animation — codepen.io

Super-slick hover effects and multi-coloured box shadows on these 3D cards!

Large

Pure CSS <table> flip toggle! 😉🎉 — codepen.io

Flip this table — very cute use of 3D CSS animation

Large

Flip Button — codepen.io

Background animation makes this button stand out

39255.qynnmd.db637ae4 eb48 449d bea3 5ec1279b3061

Uncomfortable: ELL & You — codepen.io

Neat use of rotation and CSS animated lines to connect these two elements

Large

CSS 3D Cube turned menu — codepen.io

I love this art style, and the use of CSS 3D cubes to create a nice hover animation effect

Large

HBM cover — codepen.io 
 Just for fun: a ‘fork’ of a German HBM cover….

Large

Metaballs — codepen.io

Blobby orbiting blobs of awesomeness

Large

Spinning Lines — codepen.io

An addictive little effect created using animation delay and rotation 😵