변형 애니메이션

변형 속성을 사용하여 요소에 애니메이션을 적용하는 방법을 살펴 보았습니다. 나는 쉬운 부분과 함께 약간의 문제에 달하고있다. 요소에서 마우스를 떼었을 때와 마찬가지로 즉시 원래 상태로 되돌아갑니다. 가능한 한 뒤로 같은 애니메이션 시간을 적용하고 싶습니다.변형 애니메이션

코드 :

<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만으로 구현할 수 있습니까? 아니면 자바 스크립트가 필요합니까?

가능한 중복 질문을 보았습니다. 응답이 중간에있는 것 같습니다. 마우스를 객체에서 멀리 이동 한 다음 뒤로 이동하면 애니메이션 상태를 원래 상태로 되돌릴 수 있습니다.

감사합니다,

출처

2016-10-13 Reskk

가능한 복제 [CSS3 : 밖으로 가져가 후 마우스 애니메이션을 역 (http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover) – Dekel

그냥 저것을 보았습니다. 그리고 그 해결책은 좋지만, 단지 중간에있는 것 같습니다. 마우스가 대상에서 멀어지면 손쉬운 속성을 취소하는 것처럼 보입니다. – Reskk

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

변형 애니메이션

답변

관련 문제