キーフレームは、このポストをreserachingし、発見した後、私のdivブロック

を移動しません：@Keyframes don't move my div キーフレームは、このポストをreserachingし、発見した後、私のdivブロック

およびそのポストに基づいて問題を把握しようとしている私のキーフレームは、ちょうど私が移動することを拒否理由を、私はまだ把握できませんでしたdivブロック。私はまだ非常にhtmlとCSSに新しいです。

コード内の画像はロゴになっていますが、現在は画像をプレースホルダとしてランダムに挿入しています。

ご協力いただきますようお願い申し上げます。ありがとうございました！

@keyframes move { 
 
\t 0% { top: 0%; opacity: 0;} 
 
    100% { top: 50%; opacity: 1;} 
 
\t 
 
} 
 

 
a#btn_niche { 
 
\t margin: auto; 
 
\t font-family: 'Bitter', serif; 
 
\t text-decoration: none; 
 
\t text-align: center; 
 
\t color: #5A3E2E; 
 
\t position: absolute; 
 
\t display: block; 
 
\t letter-spacing: 0.07em; 
 
\t font-size: 2.1em; 
 
} 
 

 
.niche_logo { 
 
\t margin: auto; 
 
} 
 

 
.logoblock:hover { 
 
\t animation: mymove 3s ease-out forwards; 
 
\t animation-fill-mode: forwards; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<div class="button_container"> 
 
\t <a href="http://www.uncommonobjects.com/" target="_blank" id="btn_niche"><div class="logoblock"><img class="niche_logo" src="https://cbsstlouis.files.wordpress.com/2011/01/niche_taste_exterior.jpg" width=7%></div> niche</a> 
 
</div> 
 
</body> 
 
</html>

出典

2017-06-09 Jessica Fan

あなたはアニメーションプロパティに移動するmymoveを変更する必要があります。 topプロパティの代わりにmargin-topを使用することもできます。と正しく動作するようにniche_logoにアニメーションを置く必要があります。あなたのアニメーションをlogoblockクラスで使用すると、マウスポインタがあなたの要素上にあることはありません。

@keyframes move { 
 
\t 0% { margin-top: 0; opacity: 0;} 
 
    100% { margin-top: 50%; opacity: 1;} 
 
\t 
 
} 
 

 
a#btn_niche { 
 
\t margin: auto; 
 
\t font-family: 'Bitter', serif; 
 
\t text-decoration: none; 
 
\t text-align: center; 
 
\t color: #5A3E2E; 
 
\t position: absolute; 
 
\t display: block; 
 
\t letter-spacing: 0.07em; 
 
\t font-size: 2.1em; 
 
} 
 

 
.niche_logo { 
 
\t margin: auto; 
 
} 
 

 
.niche_logo:hover { 
 
\t animation: move 3s ease-out forwards; /*change my move to move*/ 
 
\t animation-fill-mode: forwards; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<div class="button_container"> 
 
\t <a href="http://www.uncommonobjects.com/" target="_blank" id="btn_niche"><div class="logoblock"><img class="niche_logo" src="https://cbsstlouis.files.wordpress.com/2011/01/niche_taste_exterior.jpg" width=7%></div> niche</a> 
 
</div> 
 
</body> 
 
</html>

出典

2017-06-09 23:16:56 AMH

あなたの答えてくれてありがとう！私はちょうどもう一つの質問があります：ロゴとテキストの両方が動くように、この例のようにテキストではなくログブロックを動かすだけでした。テキストの位置を修正して、画像が下に来るようにしてホバリングしてそこにとどまる方法はありますか？ –

@JessicaFanこれはまったく別の質問です。このコードを見てください：https://codepen.io/alireza-mh/pen/pwgMzQ、私はあなたが欲しいものを作ろうとしましたが、私はあなたのコードの大部分を書き直すべきだと思います。 CSSの位置について読む：https：//www.w3schools.com/cssref/pr_class_position.asp – AMH

@JessicaFanこのコードを試してみてくださいhttps://codepen.io/alireza-mh/pen/pwgMzQ。私はいくつかの変更を加えました – AMH

キーフレームは、このポストをreserachingし、発見した後、私のdivブロック

答えて

関連する問題