Animierte Bilddrehung mit Rotate
Ich möchte auf einer Musiker-Website Drehknöpfe (wie Lautstärkeregler) für die Navigation benutzen. Mittels transition: ease ist es mir bereits gelungen, die Knöpfe zu animieren, sobald eine Mausaktion erfolgt.
Nun möchte ich aber noch erreichen, dass nach erfolgtem Klick und dem Aufruf der neuen Seite ein bestimmter Knopf sich von selbst dreht (ohne Mausaktion), und zwar mit einem Start- und einem Endpunkt. Leider finde ich dazu nichts Passendes bei Google, vielleicht fehlen mir die richtigen Suchbegriffe.
Probiert habe ich Folgendes:
transition: all 0.2s ease; transform: rotate(150deg, 295deg)
Die Gradangaben in Klammern habe ich bei Background-Verläufen abgeschaut, dort werden verschiedene Werte einfach durch Komma abgetrennt. Hier funktioniert das aber leider nicht.
Kann mir jemand sagen, wie die korrekte Syntax lauten muss?
Das Bild soll mit 150 Grad Drehung starten und sich sanft bis 295 Grad drehen.
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
#kreis{
width:100px;
height:100px;
background:red;
border-radius:50%;
border:2px solid black;
transform:rotate(150deg);
animation:dreh 3s forwards linear 1;
animation-play-state:paused;
}
#zeiger{
height:50px;
width:5px;
background:black;
border:3px solid black;
margin-left:44px;
border-radius:21px;
display:block;
}
@keyframes dreh{
0%{
transform:rotate(150deg);
}
100%{
transform:rotate(295deg);
}
}
</style>
<div id="kreis"><span id="zeiger"></span></div>
<button id="button1">Start</button>
<script>
$('#button1').click(function(){
$('#kreis').css('animation-play-state','running');
})
</script>