Keyframes bewegt sich nicht meinen div Block

nach reseraching und der Suche nach diesem Beitrag: @Keyframes don't move my div Keyframes bewegt sich nicht meinen div Block

und versuchen, das Problem auf diesem Posten basiert, um herauszufinden, ich konnte immer noch nicht herausfinden, warum gerade meine Keyframes weigert meine zu bewegen Div-Block. Ich bin immer noch sehr neu in HTML und CSS.

das Bild im Code soll das Logo sein, aber ich habe nur zufällig ein Bild als Platzhalter für jetzt eingefügt.

Jede Hilfe wird sehr geschätzt. Vielen Dank!

@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>

Quelle

2017-06-09 Jessica Fan

sollten Sie mymove ändern auf Animationseigenschaft zu bewegen. können Sie auch margin-top anstelle von Eigentum verwenden. und Sie sollten Animation auf niche_logo setzen, damit es richtig funktioniert. Wenn Sie Ihre Animation auf logoblock Klasse verwenden, da es sich nach unten bewegt, befindet sich Ihr Mauszeiger nicht auf Ihrem Element und es würde wieder hochspringen.

@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>

Quelle

2017-06-09 23:16:56 AMH

Vielen Dank für Ihre Antwort !! Ich habe nur noch eine Frage: Ich wollte, dass es nur den Logoblock und nicht den Text bewegt, da sich in diesem Fall sowohl das Logo als auch der Text bewegen. Gibt es eine Möglichkeit, die Position des Textes zu fixieren und nur das Bild herunterzulassen und beim Schweben dort zu bleiben? –

@JessicaFan das ist eine ganz andere Frage. bitte sieh dir diesen Code an: https://codepen.io/alireza-mh/pen/pwgMzQ, ich habe versucht, das zu machen, was du willst, aber ich denke, ich sollte den Großteil deines Codes neu schreiben. lesen Sie über css Positionierung: https: //www.w3schools.com/cssref/pr_class_position.asp – AMH

@JessicaFan Versuchen Sie diesen Code https://codepen.io/alireza-mh/pen/pwgMzQ erneut. Ich habe einige Änderungen vorgenommen – AMH

Keyframes bewegt sich nicht meinen div Block

Antwort

Verwandte Themen