css-animation-101/chapters/0204.md

# Multiple transitions

So far we've covered how a transition creates the movement between one state and another. Next we'll see what happens when we apply a single transition to an element with multiple changes, and how to use multiple transitions together to subtly improve our animation.

## Example 1: Fancy button

While we've seen a simple button hover effect already, we can combine multiple transitions into a single button for a more interesting effect.

![Source: http://codepen.io/donovanh/pen/YPMGpJ](images/multiple-button-min.gif)

In [this example](http://codepen.io/donovanh/pen/YPMGpJ) a hover effect combines several changes of state, but all are defined by a single transition:

    transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51);

Here's how it works. The button is made up of two icons and two pieces of text. The initial (non-hover) state is that the "Follow me" text and Twitter icon are positioned inside the button. I position the @ symbol and the "cssanimation" text outside the button like so:

![](images/button-element-positioning.png)

Then I add a hover state, in which the elements outside the button are positioned inside the button, like so:

![](images/button-element-positioning2.png)

I do this using CSS transforms. For example, the Twitter symbol is positioned using absolute positioning. When setting it up I positioned it where I wanted using `left` and `top` values:

    .icon {
      position: absolute;
      left: 0.75em;
      top: 0.75em;
    }

Then I add a hover state for the button and position the Twitter icon outside the button with a transform:

    a:hover .icon {
      transform: translateY(3em);
    }

Adding `overflow: hidden` to the container means that elements outside the button won't show.

With no transition in place, the icon would suddenly disappear. Since each of these elements inside the button is a span, I can apply the transition to them all at once:

    span {
      transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51);
    }

This now means that any `span` elements will be transitioned if their state changes, such as on hover. The same trick is applied to the other parts of the button.

You can [see this example in full on CodePen](http://codepen.io/donovanh/pen/YPMGpJ).

## Example 2: Background reveal

In this example I've set up a card containing some text, and show the text on hover.

![Source: http://codepen.io/donovanh/pen/LEvjJg](images/cat-min.gif)

The initial (non-hover) state of the card has the title showing but the paragraph text has an `opacity` of zero. On hover, we change that to 1 to show the text, and change the height of the text container.

Without transitions, it [looks like this](http://codepen.io/donovanh/pen/PwgKLw?editors=110). When we hover over the card the change is sudden.

With the addition two transitions to change the mood entirely. [Here's the result](http://codepen.io/donovanh/pen/LEvjJg).

The first transition (written short-hand this time) looks like this:

    transition: all 0.5s cubic-bezier(.48,-0.28,.41,1.4);

This tells the browser to animate all properties over a duration of 0.5 seconds and uses the `cubic-bezier` transition to give it some bounce. It affects the height of the text container in this case.

The second transition makes the text move. Here a `ease-out` timing function is used:

    transition: all 0.4s ease-out;

There's a lot that we can achieve by changing states on hover. In this example the `info` div's height and the paragraph are both give new values within the `.card:hover` state.

In this example we use two transitions so that each of the moving parts moves in a different way. Having elements move at different paces can really help add appeal to a transition.

You can also [see this example on CodePen](http://codepen.io/donovanh/pen/LEvjJg).

## Multiple transitions on a single element

As well as using multiple transitions on multiple elements, we can also use more than one transition on a single element.

A case for this is when you need an element's background to change separately from it's border. Applying a single transition to all properties might be too crude for both.

We can achieve this by combining multiple transitions into a single declaration. Multiple transitions are separated by commas.

For example:

    transition: background 1s ease-out, border 0.5s linear;

The first transition here works on only the background, and the second (after the comma) only applies to the border. This means that a hover state that changes the background would take 1 second and the transition of the border would take 0.5 seconds.

## Homework

In this chapter we looked at how multiple effects could be handled by a single transition, and how multiple transitions can be used together. It's worth take a look at the CodePen examples for each:

* Example 1: [Fancy button](http://codepen.io/donovanh/pen/YPMGpJ)
* Example 2: [Cat Hover card](http://codepen.io/donovanh/pen/LEvjJg)

Can you think of ways these sorts of transitions might help in a project you're currently working on?

We've covered a lot so far. Next we'll take a look at how we can apply these transitions using JavaScript.