PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS Programmierung, Logo bewegen?


Bl4ck
2019-10-19, 22:31:35
Hallo,
Ich habe eine Frage. ich bin schon seit ein paar stunden dran, was in meinem Forum hin zu kriegen. Ich möchte gerne, wenn man mit der Maus Über das logo geht, das es sich paar PX nach rechts / links bewegt.
Ich hatte das hier gesehen: gta-5-forum.de

nun habe ich das alles bei mir eingetragen, ABER es bewegt sich einfach nicht.
ich habe es so gemacht als test:

<style>
.logo {
height: 100px;
margin: 18px 0 0 10px;
position: absolute;
left: 642px;
top: 9px;
transition: all 300ms;
}
.logo:hover {
animation-name: logo-move;
animation-duration: 500ms;
animation-direction: alternate;
animation-iteration-count: 1;
{
transform: translateX(0);
}
25% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
</style>


<a href="/" class="logo-image"><img src="/sources/Unbenannt-6.png" alt="Forum" class="logo" title="Forum"></a>


Aber leider bewegt sich da gar nichts... was mache ich falsch?
Kann mir da einer helfen?

Grüße

AintCoolName
2019-10-19, 22:45:04
Es stimmt glaube ich was nicht mit deinem css. Das original hat so eine keyframe section:

@keyframes logo-move{
0% { transform: translateX(0) }
25% { transform: translateX(5px) }
75% { transform: translateX(-5px) }
100% { transform: translateX(0) }
}

Vielleicht hat das was auch mit dem position absolute von dem äußeren a tag zu tun. Aber ich würde erst das mit den keyframes probieren.

Bl4ck
2019-10-19, 22:47:47
Super, genau so klappt es... mein gott 2 stunden für nüsse :D:D

danke danke