O'Reilly

CSS Transitions

By on  

There are two ways to create animations with pure CSS:  CSS animations and CSS transitions.  CSS transitions provide a simple method for animation one or multiple properties from one value to another.    CSS transitions do not require @keyframes -- simply provide the desired transition properties to a selector.  CSS transitions traditionally occur upon state changes, like :hover or :focus.

A Basic CSS Transitions

Let's create a basic CSS transition of opacity (a fade in and out):

/* from */
.myElement {
	opacity: 0.5;
	transition-property: opacity;
}

/* to */
.myElement:hover {
	opacity: 1;
}

In the example above, when the element is hovered over, its opacity animates from 50% opacity to 100% opacity.  When the mouse leaves the element, its opacity animates back down to 50%.

CSS Transition Properties

Outside of simply providing a CSS property to transition, there are a number of other helpful transition properties:

  • transition-property: one or more properties, or "all", to transition
  • transition-duration: amount of time the transition should take to complete (ex: 2s or 0.5s)
  • transition-delay: delay before starting the transition
  • transition-timing-function: traditional timing curve function for the transition

These transition properties allow complete control over the simple animation.  Here's a CSS transition example using all of the properties available:

/* from */
.myElement {
	color: #333;

	transition-property: color;
	transition-duration: 1s;
	transition-delay: .2s;
	transition-timing-function: linear;
}

/* to */
.myElement:focus {
	color: #999;
}

/* shorthand: property duration timingFunc delay */
.myElement {
	transition: all 2s linear 0.3s;
}

In most cases, the default duration, delay,and timing function wont need to be changed.

Transitioning Multiple Properties

Multiple transition properties should be separated by commas:

.myElement {
	/* padding-left, opacity, height, and color here */

	transition-property: padding-left, opacity, height, color;
	transition-duration: 1s, 2s, 3s, 4s;
}

The "all" keyword can also be used to signify all properties should be transformed.  Separate transitions may also be strung together in a shorthand syntax:

.myElement {
	transition: padding-left 1s, opacity 2s, height 3s, color: 4s;
}

The property value can get quite long, but the flexibility is quite nice!

Detecting Transition End with JavaScript

If you're looking to detect transition end with JavaScript, that's quite easy:

myElement.addEventListener("transitionend", function() {

	// Do something now that the transition has ended

}, true);

The transitionend event on the node will fire once the transition has completed.

CSS Transition Examples

My blog has featured a number of CSS transition examples:

Track.js Error Reporting

Upcoming Events

Recent Features

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event,...

Incredible Demos

  • HTML5 download Attribute

    I tend to get caught up on the JavaScript side of the HTML5 revolution, and can you blame me?  HTML5 gaves us awesome "big" stuff like WebSockets, Web Workers, History, Storage and little helpers like the Element classList collection.  There are, however, smaller features in...

  • Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

Discussion

  1. Hey David, I recently made this

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....

  • OSCON: Live Stream

    O'Reilly's OSCON is upon us and I'm super excited to share with you a live stream of OSCON keynotes, courtesy of O'Reilly! Check back here every morning this week to get a sneak peek at the best conference in the open source community! Thank you...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...