Блог

Главная - Вопросы по программированию - Анимация с несколькими обратными переходами CSS3

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

#css #transitions

#css #переходы

Вопрос:

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

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

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

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

Ответ №1:

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

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

Ответ №2:

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

По сути, я просто добавил те же переходы в :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/

Метки: