CSS Transitions
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 transitiontransition-duration: amount of time the transition should take to complete (ex: 2s or 0.5s)transition-delay: delay before starting the transitiontransition-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:





Hey David, I recently made this $('myEl').addEventListener wouldn't work would it? I can't exactly remember my results.." data-user="Gerwinnz">
You’ll need to do something similar to my
window.postMessageevent shim:http://davidwalsh.name/onmessage
Not difficult but not ideal either :/