css-проблемка..

[wwwserfer]

Приветствую!
Подскажите пожалуйста, почему при наведении курсора анимация производится, о вот в обратную сторону - нет: просто резко возвращается к исходному состоянию?

.corner {
background: url("small.gif") no-repeat 50% 50%;
position: absolute;
display: block;
width: 60px;
height: 60px;
z-index: 9999;
right: 0px;
top: 0px;
}
.corner:hover {
background: url("big.gif") no-repeat 50% 50%;
position: absolute;
display: block;
width: 460px;
height: 460px;
z-index: 9999;
right: 0px;
top: 0px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

 

[funnywheel]

потому, что transition прописан только для состояния :hover
перенесите код transition из .corner:hover в .corner

 

[wwwserfer]

Переносил. Тогда big.gif все равно сразу пропадает, появляется small.gif, которая анимацией "едет" в угол экрана.
Может быть не получается это нормально осуществить из-за того, что размеры картинок разные?

 

[funnywheel]

то что я написал:

перенесите код transition из .corner:hover в .corner

является ответом на вопрос:

почему при наведении курсора анимация производится, о вот в обратную сторону - нет

а что у вас там с гифками - я не вижу.
вообще гифки сейчас использовать - практически моветон
тем-более прописывать гифку в :hover - это значит что ваша картинка подгрузится спустя некоторое время после наведение на элемент - привет сайтам конца девяностых

и еще, если вы хотите показать, какая у вас проблема - выкладывайте кусок кода на jsfiddle.net или codepen.io, угадывать как именно это у вас выглядит - никто не будет

 

[wwwserfer]

и еще, если вы хотите показать, какая у вас проблема - выкладывайте кусок кода на jsfiddle.net или codepen.io, угадывать как именно это у вас выглядит - никто не будет

Для просмотра ссылки Войди или Зарегистрируйся

Ну а проблему описал в первом посте..

 

[Q_BASIC]

Для просмотра ссылки Войди или Зарегистрируйся

Ну а проблему описал в первом посте..

Для просмотра ссылки Войди или Зарегистрируйся

У вас закрывающая скобка не там стояла }, оставил только большое изображение + еще немного подкорректировал

 

[zALEHANz]

Если не ошибаюсь scale дает лучший результат по причине direct3D ускорения Для просмотра ссылки Войди или Зарегистрируйся По крайней мере сейчас советуют его использовать. На моем компе scale работает значительно плавнее без дерганий.

 

[mforve]

.corner:not(hover) {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Добавь просто.

 

[vitea777]

Поставь transition и когда нету hover

 

[Perat]

Доброго, ну и я 5 копеек вставлю - вариант без гиф Для просмотра ссылки Войди или Зарегистрируйся