animation

[mathefritz]

warum funktioniert folgendes nicht? ( das wiki zu Animation war, glaub ich, schon mal ausführlicher )

#Logos3Orbit  {
   animation-name: logosrot;
   animation-duration: 5s;
   animation-iteration-count: infinite; animation-timing-function: linear;
}
@keyframes logosrot {
0% { 
    transform: rotate(0) 
  } 
100% { 
     transform: rotate(359deg) 
     } 
 }

temporärer livelink

die 3 Ovale sind ein einziges Bild, das rotieren soll.
Von mir auf der Seite stammt nur
die
Auskommentierung Der "Laufschrift", Zeile 101,
die Einfügung der <div id="Logos3Orbit>, Zeile 99,100 und obige style Ergänzungen, Zeilen 29 bis 41 .

Daß die komplette Seite vernünftig neu gestaltet werden sollt ist mir klar,
aber das würde mein Bekannter, der vieles einfach abkupfert ohne wirklich zu verstehen, dem ich unentgeltlich helfe, erst zugeben wenn garnichts mehr klappt .

[JürgenB]

Hallo,

du solltest unbedingt die html- und css-Fehler beseitigen.

#Logos3Orbit  {
…

ich habe im Queltext kein Element mit der ID Logos3Orbit gefunden, aber eins mit der ID Logos3Ortbit.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

du solltest unbedingt die html- und css-Fehler beseitigen.

Vor der Berichtigung sah die Seite besser aus.

@mathefritz sollte aber noch das Ruckeln rausnehmen: 100% { transform: rotate(360deg) }.

Besser lesbar dürfte sein:

@keyframes logosrot {
start { 
    transform: rotate(0) 
  } 
end { 
     transform: rotate(1turn) 
     } 
 }

LLAP 🖖

[mathefritz]

Hallo Gunnar,
da mir Dein Vorschlag auch sympathischer ist, versuchte ich ihn, leider
bekomme ich dann "Stil-Dokument konnte nicht geladen werden ..." ne sorry, das ist es garnicht ( kommt auch mit meiner Version )
aber Deine funktioniert trotzdem nicht ( Mozilla Firefox 52.3.0
auch mit -webkit-keyframes nicht.

[Rolf B]

Hallo mathefritz,

an Hand deines Live-Links getestet mit FF56 und Chrome 61 - da bewegt sich was. Dreht und pumpt.

Rolf

[mathefritz]

ja, Danke fürs testen;

jetzt regt sich mein 'lieber' Bekannter auf daß da ein grauer Hintergrund entsteht wenn mit gedrückter Mousetaste drüber fährt. Daß sich das animierte Teile bewegen läßt gefällt ihm aber sogar, und jetzt soll auch noch ein Glitzereffek her.

Gab'S da nicht mal was das 'unselectable' macht? Denn gdrückt drüberziehen ist ja 'selectieren' .

[Gunnar Bittersmann]

@@mathefritz

Daß sich das animierte Teile bewegen läßt gefällt ihm aber sogar, und jetzt soll auch noch ein Glitzereffek her.

Die 1990er haben angerufen. Sie hätten gerne ihre Glitzereffekte zurück. Die Drehdinger können wir behalten, sagen sie.

Was soll das werden? Ein Online-Museum zum Webdesign des letzten Jahrhunderts? Wenn nein, sag deinem lieben Bekannten, dass der Köder dem Fisch schmecken muss, nicht dem Angler.

LLAP 🖖

[Rolf B]

Hallo mathefritz,

<lmgtfy>    
    <https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable>     
</lmgtfy>

Damn - wie bringe ich (a) erzwungene Zeilenumbrüche und (b) einen Link zusammen

user-select ist noch relativ neu, die Hersteller-Präfixe sind notwendig.

Rolf

[mathefritz]

Hallo Jürgen,herzlichen Dank!!

[mathefritz]

wie ist das nun wirklich mit den -webkit- , -moz-, -o- , ( -e- ? ) Prefixen ?

Für die Animation Angaben der Elemente ist ja die Standardform die letzte
aber
für die Reihenfolge der keyframes, wie z.B. zeigt,die erste ?

[Gunnar Bittersmann]

@@mathefritz

wie ist das nun wirklich mit den -webkit- , -moz-, -o- , ( -e- ? ) Prefixen ?

-o- gibt’s nicht mehr. Mit -e- meinst du -ms-?

Für die Animation Angaben der Elemente ist ja die Standardform die letzte

Ja, damit die standardisierte Angabe die nicht standardisierte überschreibt.

aber
für die Reihenfolge der keyframes, wie z.B. zeigt,die erste ?

Da ist es egal, da es sich um At-Regeln handelt, nicht um Delarationen innerhalb einer Regelmenge.

Bei animation sind Präfixe aber kaum noch erforderlich.

LLAP 🖖

[Auge]

Hallo

wie ist das nun wirklich mit den -webkit- , -moz-, -o- , ( -e- ? ) Prefixen ?

Nutze zur Beantwortung dieser Frage, für jedes fragliche Feature einzeln(!), caniuse.com. Gib den Namen des Features teilweise in das Suchfeld ein. Die Ergebnismenge wird entsprechend der Eingabe eingeschränkt. Im Ergebnis siehst du, was du beachten musst. Die Präfixe haben heutzutage nur noch wenig Relevanz. Falls sie doch noch vereinzelt erforderlich sein sollten, siehst du das in der Spalte des betroffenen Browsers an dem gelben Rechteck in der rechten oberen Ecke für die jeweilige Version (Screenshot, Punkt 1.).

Wenn du dich über andere als nur die von CanIUse als relevant erachteten Browser informieren willst, benutze den Button „show all“ (Screenshot, Punkt 2.). Bei der jeweiligen Browserversion findest du per Hover auch Informationen über deren Anteile im Browsermarkt. Die Statistiken sind natürlich nicht akkurat, geben aber eine Tendenz wieder, der man grob trauen kann.

Tschö, Auge

[mathefritz]

Danke Gunnar und Auge!