Question

I have a div I’m trying to animate with CSS.

div {
  width:100px;
  height:50px;
  -moz-transition:
        width: 1s,
        height: 1s 1s;
}

div:hover {
  width:400px;
  height:400px;
}

It works as I want when I hover; the width is first animated, followed by the height after a 1 second delay. But when I hover off the div, I would like it to do the same animations, but in reversed order; height first, then width. Is there any way to achieve this using only CSS?

Answer 1

You can just add -moz-transition to :hover too:

http://jsfiddle.net/nvn6p/1/