CSS3 Несколько переходов одного и того же элемента - PullRequest
Новая
       30

CSS3 Несколько переходов одного и того же элемента

5 голосов
/ 26 ноября 2011

Я пытаюсь сделать эффект выпадающего для одного из моих фоновых изображений. Я смог сделать это с помощью css3, но это не завершено.

Предполагается, что эффект - это занавес, который опускается, а затем немного отскакивает назад. Проблема с css3 состоит в том, что я не знаю, как сделать переходы с тем же свойством, потому что последний переопределяет предыдущие.

Вот мой код: 

ul#nav li a {
  /* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
  background: url(images/drape2.png) 0px -149px no-repeat;
  /* CSS3 transitions */         
  -moz-transition: all 200ms ease-in-out;         
  -webkit-transition: all 200ms ease-in-out;         
} 

ul#nav li a:hover {            
  /* Action to do when user hovers over links */                          
  background-position: 0px 0px; /* make drape appear, POOF! */             
  background-position: 0px -10px; /* make drape appear, POOF! */             
}

Любая помощь будет высоко ценится.

Ответы [ 2 ]

9 голосов
/ 26 ноября 2011

Вы хотите связать их запятыми вместо новой строки

Например: 

background-color 500ms linear, color 500ms linear;
4 голосов
/ 26 ноября 2011

Используя cubic-bezier вот так:

cubic-bezier(0, 0.35, .5, 1.3)

Вы можете сделать анимацию движущейся назад или немного подпрыгнуть.

Демо (Работает только в Firefox)

Источник

Редактировать: я также сделал для вас вариант Только для Webkit , я не знаю, насколько совместимэти две техники.Он также может работать в Firefox с префиксами браузера -moz, но я его не проверял.Этот использует анимацию ключевого кадра в отличие от переходов.

...