# The CSS Transitions Cheatsheet

by [ kirupa](https://www.kirupa.com/me/index.htm) | filed under [Learn Web Animation](https://www.kirupa.com/html5/learn_animation.htm)

When it comes to **CSS Transitions**, you don't need a [bazillion pages of content](https://www.kirupa.com/html5/learn_animation.htm) or even [a book](https://www.kirupa.com/book/animation_in_html_css_and_javascript.htm) to quickly figure out something. If you are in a rush or just want something you can refer to really quickly, I've created this handy cheatsheet that provides snippets for common CSS Transitions situations. If you find something missing that should be here, [post here](http://forum.kirupa.com/t/the-css-transitions-cheatsheet-kirupa-com/633647) and I'll get to it shortly :P

Enjoy!

## The Topics

Click on any of the topics below to jump directly to the relevant section:

- [Simple Example](#simpleExample)
- [The Bare Minimum](#theBareMinimum)
- [Longhand Declaration](#longhandDeclaration)
- [Vendor Prefixes](#vendorPrefixes)
- [Easing Functions](#easingFunctions)
- [Specifying Multiple Transitions](#specifyingMultiple)
- [Listening to Multiple Properties](#listeningToMultiple)
- [Delaying the Transition](#delaying)
- [Starting from the Middle](#starting)
- [Animating Movement Smoothly with Hardware Acceleration](#animatingMovement)
- [Listening to the `transitionend` Event](#listening)
- [Multiple Transitions and the `transitionend` Event Handler](#multipleTransitionsAnd)
- [Looping a Transition](#looping)

### Simple Example

When a user hovers over the `#box` element, the change in position is animated:

```css
#box {
    transform: translate3d(0, -350px, 0);

    /* on hover, animate the transform */
    transition: transform .5s ease-in;
}
#box:hover {
    transform: translate3d(0, 0px, 0);
    cursor: pointer;
}
```

[More Details](https://www.kirupa.com/html5/all_about_css_transitions.htm)

### The Bare Minimum

To define a `transition` that works, you don't need to be verbose:

```css
/* all you need */
transition: .5s;

/* that is the exact same as this */
transition: all .5s ease-in;
```

### Longhand Declaration

The `transition` property values can be expanded into their individual properties:

```css
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease-in;
transition-delay: .1s;
```

There is no "right" or "wrong" preference when choosing between the shorthand version and longhand version. Use whatever you like.

[More Details](https://www.kirupa.com/html5/all_about_css_transitions.htm)

### Vendor Prefixes

A [small number of users](http://caniuse.com/#feat=css-transitions) will be able to view transitions only if you use vendor prefixes:

```css
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
```

In general, use the [-prefix-free library](http://leaverou.github.io/prefixfree/) instead of wasting time duplicating code.

#### Note

Despite what earlier versions of this page said, there is no `-ms-transition` property. Internet Explorer 10 was the first version to support this property, and it supported it unprefixed right out of the gate. Thanks to [Gunnar Bittersman](https://twitter.com/g16n/status/638232606740467712) for pointing that out!

[More Details](https://www.kirupa.com/html5/avoid_using_vendor_prefixes.htm)

### Easing Functions

By default, your transitions will have the **ease-in** ease specified. You can specify other ones easily:

```css
/* just pick one...don't use all of them :P */
transition: color 2s ease-in .5s;
transition: color 2s ease-out .5s;
transition: color 2s ease-in-out .5s;
transition: color 2s linear .5s;
transition: color 2s ease-in .5s;
transition: color 2s step-start .5s;
transition: color 2s ease-end .5s;
transition: color 2s steps(3, start) .5s;
transition: color 2s cubic-bezier(.70, .35, .41, .78) .5s;
```

The **cubic-bezier** ease is awesome, and use a site like [cubic-bezier.com](http://cubic-bezier.com/#.17,.67,.83,.67) to visually define and test your own easing values.

[More Details](https://www.kirupa.com/html5/easing_functions_css3.htm)

### Specifying Multiple Transitions

In the shorthand world, don't declare multiple `transition` properties. Instead, declare a single `transition` property and comma separate the values you'd pass in to them:

```css
transition: width .5s ease-in, border-radius 1s linear;
```

For the longhand version, you do something similar except each property has its own collection of comma separated values:

```css
transition-property: width, border-radius;
transition-duration: .5s, 1s;
transition-timing-function: ease-in, linear;
```

[More Details](https://www.kirupa.com/html5/all_about_css_transitions.htm)

### Listening to Multiple Properties

This only works in the longhand version. Just add all the properties you wish to listen for to the `transition-property`:

```css
transition-property: width, border-radius, background-color;
transition-duration: .5s;
transition-timing-function: ease-out;
```

[More Details](https://www.kirupa.com/html5/all_about_css_transitions.htm)

### Delaying the Transition

You can specify how long you want your transition to wait before becoming active:

```css
/* delay by .5 seconds */
transition: color 2s ease-in .5s;
```

[More Details](https://www.kirupa.com/html5/all_about_css_transitions.htm)

### Starting from the Middle

You can specify a negative offset value that specifies a point in time in the middle of the transition to start from:

```css
/* negative value signifies the offset time to start from */
transition: all 2s ease-in -.5s;
```

In this example, the transition will **start** from the .5 second mark and run for the remaining 1.5 seconds.

[More Details](https://www.kirupa.com/html5/all_about_css_transitions.htm)

### Animating Movement Smoothly with Hardware Acceleration

If you are adjusting the movement of an element, use the **translate3d** transform to ensure you get hardware acceleration:

```css
.pictureContainer img {
    position: relative;
    top: 0px;
    transition: transform .2s ease-in-out;
}
.pictureContainer img:hover {
    transform: translate3d(0px, -150px, 0px);
}
```

Unless you can't avoid it, don't animate an element's position via `margin`, `padding`, `top`, `left`, `right`, `bottom`, **translate** transform, or any other CSS property you have for making things move.

[More Details](https://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm)

### Listening to the `transitionend` Event

The `transitionend` event is fired when a transition runs to completion:

```js
// assume #blueCircle has a transition defined on it
var blueCircle = document.querySelector("#blueCircle");

blueCircle.addEventListener("transitionend", detectTheEnd, false);
blueCircle.addEventListener("webkitTransitionEnd", detectTheEnd, false);
blueCircle.addEventListener("mozTransitionEnd", detectTheEnd, false);
blueCircle.addEventListener("msTransitionEnd", detectTheEnd, false);
blueCircle.addEventListener("oTransitionEnd", detectTheEnd, false);

function detectTheEnd(e) {

}
```

[More Details](https://www.kirupa.com/html5/the_transitionend_event.htm)

### Multiple Transitions and the `transitionend` Event Handler

If the element that fires the `transitionend` event has multiple transitions defined, you can identify which transition to listen to by checking the value of the event argument's `propertyName` property:

```js
function detectTheEnd(e) {
    if (e.propertyName == "opacity") {
        // do something interesting
    } else if (e.propertyName == "transform") {
        // do something interesting
    }
}
```

[More Details](https://www.kirupa.com/html5/the_transitionend_event.htm)

### Looping a Transition

There is no built-in way to loop a transition. You have to listen to the `transitionend` event and change the animated property values between an initial value and a final value. Imagine you have some CSS that looks as follows:

```css
#circleDiv {
    transition:transform .2s ease-in-out, opacity .2s ease-in-out;
}
    .stateOne {
        opacity: 1;
        transform: scale(1, 1);
    }
    .stateTwo {
        opacity: .5;
        transform: scale(1.9, 1.9);
    }
```

The JavaScript that will help you jump between the initial and final values with each `transitionend` firing is:

```js
var theCircle = document.querySelector("#circleDiv");

function setup() {
	// start the transition when you hover over the element
    theCircle.addEventListener("mouseover", setInitialClass, false);

    theCircle.addEventListener("transitionend", loopTransition, false);
    theCircle.addEventListener("webkitTransitionEnd", loopTransition, false);
    theCircle.addEventListener("mozTransitionEnd", loopTransition, false);
    theCircle.addEventListener("msTransitionEnd", loopTransition, false);
    theCircle.addEventListener("oTransitionEnd", loopTransition, false);
}
setup();

function setInitialClass(e) {
    theCircle.className = "stateTwo";
}

function loopTransition(e) {
    if (e.propertyName == "opacity") {
        if (theCircle.className == "stateTwo") {
            theCircle.className = "stateOne";
        } else {
            theCircle.className = "stateTwo";
        }
    }
}
```

The `loopTransition` event handler contains the lines of code that oscillate the CSS property values between what gets represented with `stateOne` and `stateTwo`.

[More Details](https://www.kirupa.com/html5/looping_a_css_transition.htm)

## Conclusion

This cheatsheet is a work in progress. If there additional snippets you'd like me to add or changes you'd like me to make, post them in the forums below.