Трансформация анимации

Я только что узнал, как анимировать элементы, используя свойство transform (выглядит потрясающе!). Тем не менее, я столкнулся с небольшими проблемами. Как и в случае, когда я снимаю мышь с элемента, он мгновенно возвращается в исходное состояние - я бы хотел применить одно и то же время анимации на обратном пути, если это возможно.Трансформация анимации

Код:

<div class="transform-box"> 
</div> 

.transform-box:hover { 
animation: raise 2s; } 

@keyframes raise { 
0% { 
transform: translateY(0); } 

100% { 
transform: translateY(-150px); } 
}

Могу ли я сделать это правильный путь? Или я должен использовать разные свойства, если я хочу равное время анимации на пути вверх и на этом пути назад?

Редактировать: Пример: https://www.lonelyplanet.com/france/paris - прокрутите страницу до второго раздела, где говорится: «Лучшие впечатления в Париже - это что-то достижимое только с CSS или для этого требуется Javascript?

Я посмотрел на возможный дублирующий вопрос, и кажется, что ответ только на полпути - он может управлять временем анимации обратно в исходное состояние, однако, если мышь отодвигается от объекта, то он отскакивает назад.

Спасибо,

Reskk

источник

2016-10-13 Reskk

Возможный дубликат [CSS3: обратный анимации курсора мыши после висения] (http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover) – Dekel

Просто посмотрел на это, и кажется, что, хотя решение хорошо, оно только на полпути. Как будто это отменило свойство непринужденности, если мышь отходит от объекта. – Reskk

Это может быть достигнуто без JS.

.transform-box { 
    float:left; 
    transition: 2s ease-in-out; 
} 

.transform-box:hover { 
    transform: translateY(-20px); 
} 

<div class="transform-box"> 
    <img src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-546212251_medium.jpg" width="300px"> 
</div>

Проверьте эту страницу. http://www.the-art-of-web.com/css/css-animation/

источник

2016-10-13 02:51:27 RSSM

ответ

Смежные вопросы