호버에서 CSS로 div 애니메이션하기

CSS3의 @keyframes 규칙을 사용하여 호버에서 div에 애니메이션을 적용하려고합니다. 애니메이션의 코드는 this page의 맨 아래에 있습니다 ("ANALATION BY ANIMATION"주석 ASCII 아트로 충분하게 표시 한 직후). 여기에는 @keyframes 규칙, div 및 div : hover가 포함됩니다. 이 애니메이션을 원했던 페이지는 right here입니다. 어떤 이유로 애니메이션이 작동하지 않습니다. 이것은 CSS 애니메이션을 사용하여 시도한 첫 번째 시도이므로 어딘가에서 초보자 실수가있을 수 있습니다.호버에서 CSS로 div 애니메이션하기

출처

2012-04-12 Jules

@keyframes 규칙은 모든 브라우저에서 지원되지 않습니다. Firefox는 @ -moz-keyframes 규칙을 대신 지원합니다. Safari와 Chrome은 @ -webkit-keyframes 규칙을 대신 지원합니다. 이걸로 계속 엉망이 될거라 확신합니까? =) –

@ -webkit-keyframes 규칙은 이미 거기에 있다고 생각합니다. 나는 Dreamweaver가 이것을 유효한 @keyframes 변형으로 인식하지 않았기 때문에 -moz를 기권했습니다. 하지만 Chrome에서 페이지를 테스트했는데 애니메이션이 표시되지 않습니다. – Jules

내 생각에 당신이 관심있는 실제 페이지를 가리키는 링크를 남겼다고 생각합니다. –

div를 0px에서 200px로 애니메이트하려는 경우 jQuery 솔루션을 사용하는 것이 훨씬 더 쉽습니다. jQuery는 Safari 및 Chrome에서만 지원되는 @keyframe과 비교하여 브라우저 간 호환성을 제공합니다. http://jsfiddle.net/ZgcxL/이

편집 : 당신이 사용자는 크롬과 사파리로 제한하지 않으려면

, 당신은 확실히 jQuery를 고려해야 여기

은 예입니다. 사용하기가 매우 쉽습니다. <head></head> 태그 사이에이 코드를 추가하면됩니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.macanimation').hover(function() { 
     $(this).animate({top: '200px'}); 
    }); 
    }); 
</script>

편집 2 : 내가 document.ready 잊어

(). 위의 코드를 다시 붙여 넣으십시오. 또한 위치를 추가하십시오 : 절대; div에 '너비'에 'px'를 추가하십시오.

div.macanimation { 
    position: absolute; 
    width:960px; 
    height:500px; 
    padding-left:40px; 
    padding-right:40px; 
    margin:auto; 
    background-image:url(/Photos/MacHQ.png); 
}

테스트를 마쳤습니다.

출처

2012-04-12 01:19:58

저는 CSS3에 대해서보다 jQuery에 대해 많이 알고 있습니다. (예전에는 한번도 사용하지 않았습니다.) 유일한 해결책이라면 나는 그것을 시도 할 것이다. 그렇지 않으면 CSS3를 고수하고 싶습니다. – Jules

사실 jquery.js 파일을 내 root/js 폴더에 넣었습니다. jQuery를 사용할 준비가되었습니다. 이 스크립트는 어디에 배치해야합니까? $ ('div') .hover (function() { $ (this) .animate ({top : '200px'}), }); – Jules

수정 된 답변보기 –

호버에서 CSS로 div 애니메이션하기

답변

관련 문제