호버링 효과를 늦출 수있는 방법이 있습니까?

호버링 효과를 늦출 수있는 방법이 있습니까? 이미지의 마우스 오버시 텍스트가 표시되는 내 사이트 (삭제됨)에 마우스를 올려 놓으면 효과가 나타납니다. 나는 그 효과를 약간 느리게하고 싶다. 사진이 얼마나 빨리 전환되는지는 불만입니다.호버링 효과를 늦출 수있는 방법이 있습니까?

어떻게하면됩니까?

출처

2012-06-22 S. Fellig

은 jQuery를 사용할 수있는 옵션입니까? –

http://cherne.net/brian/resources/jquery.hoverIntent.html –

당신은 CSS3 전환을 추가 할 수 있습니다 : 그것은 텍스트를 표시하는 방법에 따라 달라집니다

-webkit-transition: all 500ms ease; 
-moz-transition: all 500ms ease; 
-ms-transition: all 500ms ease; 
-o-transition: all 500ms ease; 
transition: all 500ms ease;

출처

2012-06-22 21:54:41 eivers88

'* : hover'와 함께 작동합니까? – xameeramir

. CSS 속성을 변경하는 경우 CSS3 transitions을 사용하면됩니다. 아래는 그 예입니다.

HTML :

<div id="A"></div><div id="B"></div>

CSS :

div { 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 

    -moz-transition: opacity 4s; /* Firefox */ 
    -webkit-transition: opacity 4s; /* Safari and Chrome */ 
    -o-transition: opacity 4s; /* Opera */ 
    transition: opacity 4s; 
} 
#A { 
    background: red; 
    opacity: 1; 
    z-index: 1; 
} 
#B { 
    background: blue; 
    opacity: 0; 
    z-index: 2; 
} 
#B:hover { 
    opacity: 1; 
}

Demo

편집 : 데이비드 토마스가 내게 말했다되었음을 할 수없는 짱 화면 전환과 디스플레이. 불투명도를 사용하도록 위의 내용을 업데이트했습니다. 당신이 원하는 경우

출처

2012-06-22 21:55:03 Zhihao

'표시'상태간에 '전환'할 수 없습니다. 확실히'display : block'과'display : none' 사이가 아닙니다. 콘텐츠는 단순히 점프하고 애니메이션을 만들 것입니다. –

@DavidThomas, 고맙습니다. 나는 그것을 몰랐다. 아마도 그것은 불투명하게 처리 될 수 있습니까? 나는 그것을 반영하기 위해 나의 대답을 편집했다. – Zhihao

예, '불투명도'를 전환 할 수 있습니다. 나는 더 나은 옵션을 여기에서 찾는다. – BoltClock

, 당신은 사용할 수 jQuery를 .fadeIn() http://api.jquery.com/fadeIn/

.fadeIn ([시간] [콜백])
기간 문자열이나 숫자 시간을 결정 애니메이션이 실행됩니다.
콜백 애니메이션이 완료되면 호출하는 기능.

출처

2012-06-22 22:36:18 Andrey

나는 꽤 늦었지만 CSS3 애니메이션을 살펴 본다. Garry 's Mod 로딩 화면 중 하나에서 애니메이션을 사용합니다.

/* Styles go here */ 
 

 
button { 
 
    margin-left: 50%; 
 
    margin-right: 50%; 
 
} 
 
button:hover { 
 
    -webkit-animation: breathing 5s ease-out infinite normal; 
 
    animation: breathing 5s ease-out infinite normal; 
 
} 
 
@-webkit-keyframes breathing { 
 
    0% { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    25% { 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    50% { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    75% { 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
} 
 
@keyframes breathing { 
 
    0% { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    25% { 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    50% { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
    75% { 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <p>Below I have a button that changes size on mouse hover useing CSS3</p> 
 
    <button>Hover over me!</button> 
 
</body> 
 

 
</html>

나는 그것이 당신이 찾고 꽤 결과가 아니다 알고하지만 난 당신과 다른 사람이 유용하게 찾을 수 있습니다 확신합니다.

출처

2015-06-26 16:53:56

호버링 효과를 늦출 수있는 방법이 있습니까?

답변

관련 문제