CSS3 多重过渡反转动画 [英] CSS3 multiple transitions reversed animation

问题描述

我有一个 div，我想用 CSS 制作动画.

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;
}

当我悬停时它可以按我的意愿工作；宽度首先动画，然后在 1 秒延迟后高度.但是当我将鼠标悬停在 div 上时，我希望它执行相同的动画，但顺序相反；先高度，再宽度.有没有办法只使用 CSS 来实现这一点?

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?

推荐答案

您也可以将 -moz-transition 添加到 :hover 中:

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

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

这篇关于CSS3 多重过渡反转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！