Hi,
vielleicht kann ja jemand schnell helfen oder hat mal was ähnliches gemacht.
Ich würde gerne ein Bild auf einer Webseite "animieren", nur via HTML, CSS oder JS.
Was ich bereits gefunden habe:
img:hover {
/* Start the shake animation and make the animation last for 0.5 seconds /
animation: shake 0.5s;
/* When the animation is finished, start again /
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Das passt jedoch nicht so ganz, weil es überhaupt nicht so aussieht wie ein Bass/Beat Effekt. Ich möchte das ganze halt so einrichten, das wenn man die Webseite besucht, das Logo für 3-5 Sekunden einen leichten Bass/Beat Effekt "nachahmt/animiert", während im Hintergrund eine Melodie läuft.
Vllt ist einfach nur der Befehl " animation: shake 0.5s;" supoptimal?!?! Kennt sich jjemand aus?