zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Animierte Bilddrehung mit Rotate

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.06.2018, 17:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 47
Sunlion befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.06.2018, 21:23
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

meinst du das so https://codepen.io/basti1012/pen/XYYvaN
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.06.2018, 21:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 47
Sunlion befindet sich auf einem aufstrebenden Ast
Standard

Ja, exakt, nur ohne den Knopf. Aber die Essenz habe ich extrahiert, und sie funktioniert nun genau so, wie gewünscht.
Aha, man muss die Werte also in zwei verschiedene geschweifte Klammern packen. Interessant, das hab ich so auch noch nicht gesehen. Ich werde bei nächster Gelegenheit mal danach googeln und mir die Infos anlesen.
Erst mal vielen Dank, hast mir sehr geholfen!
Mit Zitat antworten
Antwort

Stichwörter
animation, bild, drehen, drehung, rotate

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
a href und -webkit-transform: rotate in Chrom problematisch! =( Paykoman CSS 14 12.11.2013 11:32
Animierte Werbebanner designen lassen - Design zu verspielt? masterbanner Site- und Layoutcheck 4 03.11.2013 20:48
Schiefgestellte Navigation (rotate) Barodscheff CSS 5 30.06.2012 16:00
CSS Rotate verschachteln? Catscratch CSS 2 13.09.2010 11:04
Animierte GIF-Datei startverzögert p0mmeluff Grafik, Design, Typografie 1 11.12.2009 16:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:56 Uhr.