Using an inner and outer container you can animate content on a curved path
CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying ananimation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.
Read more from the source: Tobias Ahlin
Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.
It does so by making copies of the two elements (and all their children), setting a fixed position on each, then using CSS transforms to morph the two elements in sync.
View the demo at rich-harris.co.uk
Examples of good animation: it should feel natural and act to clarify what just happened
Over-animated interfaces can have a negative impact on the user experience, but subtle and invisible animation can improve it significantly.
Read more from the source: Medium
Try this cool effect that uses SVG Gaussian blur, a color matrix and color blend to make two circles join together like drops of liquid
Lucas Bebber is the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist
SVG filters have good support, but not all browsers support them being applied to regular DOM elements, notably Safari. However, they do work at least on Firefox and Chrome, even the Android version, and the filter degrades nicely if it doesn’t work. If you absolutely need the effect to work, consider using SVG elements instead of DOM elements.
Read more from the source: CSS-Tricks
Chrome Canary gives you a sneak peak of dev tools for CSS3 animation
Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations.
To try these out for yourself in Canary, open up Dev Tools and go to Styles tab under Elements. Look for the play button in the far right and you’re off to the races.
Read more from the source: valhead.com
Holy crap, you can use SVG to animate content boxes that bounce, flex, and change shape!
Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it. It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, we’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.
Read article and view demos as Codrops