ホバー効果を遅くする方法はありますか？

ホバー効果を遅くする方法はありますか？画像のホバー上にテキストを表示する私のサイト（削除済み）にホバー効果があります。私は少しだけ効果を減速させたい。画像がどれだけ早く切り替わるかは、ちょっとした不安です。ホバー効果を遅くする方法はありますか？

どうすればいいですか？

出典

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 '状態間で'遷移 'することはできません。確かに 'display：block'と' display：none'の間ではありません。コンテンツは単にジャンプし、おそらくアニメーション化されます。 –

@DavidThomas、ヘッドアップのおかげで。私はそれを知らなかった。おそらく、それは不透明で行うことができますか？私はそれを反映するために私の答えを編集しました。 – Zhihao

はい、「不透明」を遷移させることができます。私はそれがより良いオプションをここで見つける。 – BoltClock

、あなたが使用できるjQueryの.fadeIn（）http://api.jquery.com/fadeIn/

.fadeIn（[期間]、[コールバック]）
期間文字列または数時間の長さを決定しますアニメーションが実行されます。
コールバックアニメーションが完了すると呼び出す関数。

出典

2012-06-22 22:36:18 Andrey

これはかなり遅いですが、CSS3アニメーションを見てください。 GarryのMod読み込み画面の1つでアニメーションを使用します。

/* 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

ホバー効果を遅くする方法はありますか？

答えて

関連する問題