div 요소가 있고 왼쪽에서 CSS 상대 위치에 애니메이션을 적용하고 싶습니다. -260px; 왼쪽 : -130px; 마우스를 그 위에 놓을 때 0.5 초가 넘고 마우스가 해당 div 위에있는 한 그대로 유지하고 싶습니다. 마우스를 해당 div에서 옮겼을 때 원래 위치로 다시 애니메이션을 적용하고 싶습니다.
CSS 키 프레임 애니메이션에 대한 수많은 튜토리얼을 읽었는데 매우 혼란 스럽습니다. 정말 간단한 것을 원합니다. 0.5 초 동안 지속되는 애니메이션을 부드럽게합니다.
CSS 또는 CSS + JavaScript (jQuery 없음)를 사용하여 어떻게 할 수 있습니까?
사용
.myclass {
transition: 0.5s;
}
.myclass:hover {
/* add relevant vendor prefixes */
transform: translateX(130px);
transition: 0.5s;
}
편집 : 개념 증명 : http://codepen.io/Theodeus/pen/oXWEYx
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다