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:

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Retrieve Google Analytics Visits and PageViews with PHP

    Google Analytics is an outstanding website analytics tool that gives you way more information about your website than you probably need. Better to get more than you want than not enough, right? Anyways I check my website statistics more often than I should and...

  • By
    :valid, :invalid, and :required CSS Pseudo Classes

    Let's be honest, form validation with JavaScript can be a real bitch.  On a real basic level, however, it's not that bad.  HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...

Discussion

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