CSS3 несколько переходов, обратная анимация - PullRequest
Новая
       10

CSS3 несколько переходов, обратная анимация

3 голосов
/ 26 октября 2011

У меня есть div, который я пытаюсь анимировать с помощью CSS. 

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

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

Это работает, как я хочу, когда я парю; ширина сначала анимируется, а затем высота после 1-секундной задержки. Но когда я парю с div, я бы хотел, чтобы он делал те же анимации, но в обратном порядке; сначала высота, потом ширина. Есть ли способ добиться этого, используя только CSS?

Ответы [ 2 ]

2 голосов
/ 26 октября 2011

Вы можете просто добавить -moz-transition к: hover тоже:

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

0 голосов
/ 26 октября 2011

Это работает для меня. И делает его кросс-браузерным.

По сути, я только что добавил те же переходы к :hover, однако ... и это ВАЖНО ... вам нужно поменять height и width на начальном transition

div {
  background:red;  
  width:100px;
  height:50px;
  -moz-transition-property: height, width;
  -webkit-transition-property: height, width;
  transition-property: height, width;
  -moz-transition-duration: 1s, 1s;
  -webkit-transition-duration: 1s, 1s;
  transition-property-duration: 1s, 1s;
  -moz-transition-delay: 0, 1s;
  -webkit-transition-delay: 0, 1s;
  transition-property-delay: 0, 1s;
}

div:hover {
  width:400px;
  height:400px;
  -moz-transition-property: width, height;
  -webkit-transition-property: width, height;
  transition-property: width, height;
  -moz-transition-duration: 1s, 1s;
  -webkit-transition-duration: 1s, 1s;
  transition-property-duration: 1s, 1s;
  -moz-transition-delay: 0, 1s;
  -webkit-transition-delay: 0, 1s;
  transition-property-delay: 0, 1s;    
}

Пример: http://jsfiddle.net/qknMg/1/

...