CSS Animation Weekly #31 — CSS variables, transitionend, Search UI ideas

A mix of technical learning and gorgeous inspiration this week. Learn how CSS variables can help our transforms, the nuances of “transitionend” events, and be inspired.

♥️

Donovan at CSSAnimation.rocks


Articles

Blog anim h 1024x522

CSS animation example using keyframes — www.moxiecreek.com

A guide to creating a day/night keyframe animation. Created by a CSS Animation 101 student!

A Trick: Individual CSS Transform Functions

danielcwilson.com

Ever struggled to understand the chains of transforms? Dan Wilson shows how we can use CSS variables to allow for more fine grained control.

Nuances of CSS transitionend Events

seesparkbox.com

Respond to the end of animations better with this JavaScript event.

Searchuieffects featured

Inspiration for Search UI Effects — tympanus.net

Your current search approach feeling a bit old and boring? Try these cool ideas from Codrops.

Inspiration

CodePen — Interactive SVG Toast

codepen.io

Start your morning with some freshly built toasty SVG goodness. 🍞

Pure CSS Neon Wave

codepen.io

3D cubes and transform combined into a slick wavy animation 🌊

Love Magnetic

codepen.io

Cute animation created using GSAP. Click the heart ♥️

1 element rainbow spinner 2017

codepen.io

Nicely built rainbow-background spinner, build using one element and a little bit of Sass math.

Pop Up Button Idea

codepen.io

Nice little example of how a button can “pop up” using a little animation.

Animation in the real world

All

Fox Créateur — www.foxcreateur.com

London based Fox Créateur is full of lovely animations and artwork.