Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is! Introduction to the Web Animations API As with last week, I’ll start this
Read more from the source: bitsofcode
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