mathefritz: animation

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 .

  1. 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

    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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.

        1. Hallo mathefritz,

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

          Rolf

          --
          sumpsi - posui - clusi
          1. 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' .

            1. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            2. 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

              --
              sumpsi - posui - clusi
    2. Hallo Jürgen,herzlichen Dank!!

  2. 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 ?

    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. 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.

      Screenshot caniuse.com, Anzeige der Browserpräfixe, Umschalter zwischen den wichtigsten und allen Browsern

      Tschö, Auge

      --
      Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
      Toller Dampf voraus von Terry Pratchett
    3. Danke Gunnar und Auge!