CSS transitions offer the easiest way to animate an interface. CSS is used everywhere to control how web pages appear, and shifts from one set of style sheets to another ordinarily occur abruptly. Adding transition properties allows most of those changes to occur gradually, for a more vibrant, fluid interface. Here are 16 CSS3 Transition Tutorials & Libraries introduce CSS’s various transition properties and shows you how to control how smoothly transitions execute.

All you need to know about CSS Transitions

This tutorial is going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU.

CSS Transitions and Transforms for Beginners

This post will introduce you to CSS transitions and CSS transforms: the CSS power couple. When used together, these properties allow you to create simple animations and add valuable interaction and visual feedback for your users.

Maintaining CSS Style States using “Infinite” Transition Delays

This is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The character will always be stuck in a transition and only moves when you hold down a button.

Implementing Off-Canvas Navigation For A Responsive Website

The varying viewports that our websites encounter on a daily basis continue to demand more from responsive design. Not only must we continue to tackle the issues of content choreography — the art of maintaining order and context throughout the chaotic ebb and flow of the Web browser — but we must also meet the expectations of users. They’re not sitting still.

CSS3 Transition Animations With jQuery Fallbacks

We’ll be taking a look at how you can use CSS3 transitions to power your application’s animations with jQuery’s .animate() method as a fallback where transitions aren’t supported. The benefit of transitions is that unlike JavaScript based animations, they’re hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you would normally experience.

Transit

Create super-smooth CSS transitions and do interesting transformations using jQuery.

Effeckt.css

UI-Less & Performant Transitions & Animations.

Animatable

One property, two values, endless possiblities.

GFX

GFX is an 3D CSS3 animation library that extends jQuery with some useful functionality for programmatically creating CSS3 transitions. CSS3 transitions are superior to manual ones (using setTimeout) since they’re hardware accelerated, something particularly noticeable on mobile devices.

CSS3 Transitions with custom easing functions

One area CSS transitions are not as flexible as the Javascript alternatives is easing functions. Libraries such as jQuery & Scripty2 have a suite of really compelling functions that just aren’t available with CSS transitions.

Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Magic

Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.

Sprite3D.js

Sprite3D.js, a small library for generating and manipulating CSS 3D transforms

cssSandpaper

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE (which doesn’t support it in IE natively) but in other browsers which implement their own vendor-specific variants of these properties.

Roots

Roots includes a css library called axis built on top of stylus. It contains a lot of functionality and is very large, but it should be an easy transition from regular css, less, or sass. With stylus, you can use brackets and semicolons or not, your choice. You can even mix them. Pasting straight css will compile perfectly, and nothing in this library overrides anything in regular css in a destructive manner. In addition, this library adds no extra weight to your css footprint unless you do it specifically using mixins or imports. Axis css is an enhancement of regular css, and you can ease into it gradually, unlike some other libraries which require you to learn entirely new syntax.

Anima

With Anima it’s easy to animate over a hundred objects at a time. Each item can have it’s mass and viscosity to emulate reallife objects!