CSS Animation mit Keyframes

Letzte Aktualisierung : |  

Du möchtest Wolken oder auch etwas anderes nur mit CSS animieren, dann nutze animation und keyframes somit kannst du entweder absolute positionierte elemente mit left top right und bottom bewegen in den keyframes oder auch mit transform translate, das ist dir überlassen.


Aber wusstest Du

Das man das auch mit JavaScript tun kann? Wenn man eine Transformation mit einer 3D-Eigenschaft (wie translate3d () oder matrix3d ​​()) festlegt, wird vom Browser eine GPU-Ebene für dieses Element erstellt. Der GPU-Geschwindigkeitsschub ist also nicht nur für CSS-Animationen gedacht, auch JavaScript-Animationen können davon profitieren!


Die meisten Vergleiche im Internet peggen CSS-Animationen gegen jQuery, da es so weit verbreitet ist (als ob "JavaScript" und "jQuery" synonym wären), aber jQuery ist allgemein bekannt, dass es hinsichtlich der Animationsleistung ziemlich langsam ist. Der neuere  GSAP ist auch JavaScript-basiert, aber es ist buchstäblich bis zu 20x schneller als jQuery. Ein Teil des Grundes, warum JavaScript-Animationen einen schlechten Ruf haben, ist, was man den "jQuery-Faktor" nennt.



Animation der Wolken

In unserem Beispiel animieren wir Wolken die von links nach rechts und von rechts nach links, wie in einem loop, die immer wieder kommen. Und das alles nur mit CSS, weiter unten findest Du den Code dafür. Wir machen hier nichts anderes als die Elemente ausserhalb des sichtbaren Bereichs zu platzieren. Dies tun wir z.B. mit

// CSS CODE
     0  position: absolute;   1  top: 100px;   2  /* Oder auch right */  3  left:-250px; 

    Wir bringen sie mit negativen zahlen dort hin. Habe ich ein Element was z.B. 150px width hat dann nutze ich left -250px, so dann ist das Element nicht mehr zusehen. Jetzt kann man entweder von einer breite ausgehen, oder dies mit JavaScript genau berechnen und setzen. Wenn Du weisst das Deine Box nie größer wird als 600px, dann kannst Du eine maximale-breite setzen

    // CSS CODE
       0  max-width: 600px; 

      Um das auch zu sichern und wenn Du Dein Element von 0px auf 850px bewegst wird es wie eine schleife aussehen, weil nichts im sichtbaren Bereich auf einmal die position wechselt.

      // CSS CODE
         0  /* Oder auch translate() */  1  translate3d(0px,0px,0px); 

        Achte hier auf die Info oben :). Man könnte mit JavaScript Element Positionen berechnen und sie so wie man möchte Bewegen, starten, stoppen, zu bestimmten Richtungen und auch die Richtung ändern mit Interaktionen. Wir tun dies hier mit keyframes

        // CSS CODE
           0  @keyframes cloud1 {   1       from{transform: translate3d(0px,0px,0px)}   2       /* Bei right einfach die Zahl mit einem minus davor -850px */  3       to{transform: translate3d(850px,0px,0px)}   4   } 

          Und setzen bei der gewünschten Wolke dann unsere animation

          // CSS CODE
             0  animation: cloud1 50s infinite linear; 

            TIPP

            Du kannst hover so wie andere Pseudoelemente verwenden um CSS events zu feuern.

            HTML und CSS der Wolken animation

            Das CSS für dieses Beispiel findest Du hier, sie kann erweitert oder auch gekürzt werden bzw. in SASS oder LESS übertragen.


            // CSS CODE
               0  /*   1   *  Created on : 02.05.2018, 15:44:15  2   *  @copyright : Samet Tarim  3   *  @author    : Samet Tarim aka prod3v3loper  4   */  5    6  .mb-cloud {   7    8      position: relative; // Here to relative to fix elements with absolute inside  9      overflow: hidden;   10      width: 100%;   11      height: 30em;  12      max-height: 30em;  13      background: linear-gradient(#87CEEB,#E0FFFF);   14  }   15    16  .cloud1,   17  .cloud2,   18  .cloud3,   19  .cloud4,   20  .cloud5,   21  .cloud6 {   22    23      position: absolute;   24    25      -webkit-border-radius: 200px;     26      -moz-border-radius: 200px;     27      border-radius: 200px;  28  }   29    30  .cloud1, .cloud4 {     31    32      width: 200px;     33      height: 60px;     34      background: #00c9ee;   35  }     36    37  .cloud1 {   38    39      top: 80px;   40      left:-230px;   41      animation: cloud1 50s infinite linear;   42  }   43    44  @keyframes cloud1 {   45      from{transform: translate3d(-130px,0,0)}   46      to{transform: translate3d(1900px,0,0)}   47  }   48    49  .cloud2 {   50    51      top: 200px;   52      left:-230px;   53      animation: cloud2 20s infinite linear;   54  }   55    56  @keyframes cloud2 {   57      from{transform: translate3d(-90px,0,0)}   58      to{transform: translate3d(1900px,0,0)}   59  }   60    61  .cloud3 {   62    63      top: 300px;   64      right:-230px;   65      animation: cloud3 60s infinite linear;   66  }   67    68  @keyframes cloud3 {   69      from{transform: translate3d(210px,0,0)}   70      to{transform: translate3d(-1900px,0,0)}   71  }   72    73  .cloud4 {   74    75      top: 400px;   76      left:-230px;   77      animation: cloud4 80s infinite linear;   78  }   79    80  @keyframes cloud4 {   81      from{transform: translate3d(-80px,0,0)}   82      to{transform: translate3d(1900px,0,0)}   83  }   84    85  .cloud5 {   86    87      top: 300px;   88      left:-230px;   89      animation: cloud5 100s infinite linear 1s;   90  }   91    92  @keyframes cloud5 {   93      from{transform: translate3d(-80px,0,0)}   94      to{transform: translate3d(1900px,0,0)}   95  }   96    97  .cloud6 {   98    99      top: 150px;   100      right:-230px;   101      animation: cloud6 40s infinite linear 1s;   102  }   103    104  @keyframes cloud6 {   105      from{transform: translate3d(300px,0,0)}   106      to{transform: translate3d(-1900px,0,0)}   107  }      108    109  .cloud1:after, .cloud4:after {     110    111      content: '';     112      position: absolute;     113      top:-40px;     114      left: 20px;     115      width: 80px;     116      height: 80px;      117      background: #00c9ee;   118      -webkit-border-radius: 200px;     119      -moz-border-radius: 200px;     120      border-radius: 200px;  121  }     122    123  .cloud1:before, .cloud4:before {     124    125      content: '';     126      position: absolute;     127      top:-60px;     128      right: 30px;     129      width: 100px;     130      height: 100px;     131      background: #00c9ee;    132      -webkit-border-radius: 200px;     133      -moz-border-radius: 200px;     134      border-radius: 200px;  135  }     136    137  .cloud2, .cloud5 {     138    139      width: 100px;     140      height: 30px;    141      background: #00c9ee;     142  }     143    144  .cloud2:after, .cloud5:after {     145    146      content: '';     147      position: absolute;     148      width: 40px;     149      height: 40px;     150      top:-20px;     151      left: 10px;     152      background: #00c9ee;     153      -webkit-border-radius: 200px;     154      -moz-border-radius: 200px;     155      border-radius: 200px;  156  }     157    158  .cloud2:before, .cloud5:before {     159    160      content: '';   161      position: absolute;     162      top:-30px;     163      right: 15px;     164      width: 50px;     165      height: 50px;     166      background: #00c9ee;    167      -webkit-border-radius: 200px;     168      -moz-border-radius: 200px;     169      border-radius: 200px;  170  }     171    172  .cloud3, .cloud6 {     173    174      width: 200px;     175      height: 60px;     176      background: #00f1ee;     177      box-shadow: 0px 0px 20px 5px #00f1ee;     178      -moz-box-shadow: 0px 0px 20px 5px #00f1ee;     179      -webkit-box-shadow: 0px 0px 20px 5px #00f1ee;     180  }     181    182  .cloud3:after, .cloud6:after {     183    184      content: '';     185      position: absolute;    186      width: 80px;     187      height: 80px;     188      top:-40px;     189      left: 20px;     190      background: #00f1ee;    191      -webkit-border-radius: 200px;     192      -moz-border-radius: 200px;     193      border-radius: 200px;  194      box-shadow: 0px 0px 20px 5px #00f1ee;     195      -moz-box-shadow: 0px 0px 20px 5px #00f1ee;     196      -webkit-box-shadow: 0px 0px 20px 5px #00f1ee;   197  }     198    199  .cloud3:before, .cloud6:before {     200    201      content: '';     202      position: absolute;    203      width: 100px;     204      height: 100px;     205      top:-60px;     206      right: 30px;     207      background: #00f1ee;     208      -webkit-border-radius: 200px;     209      -moz-border-radius: 200px;     210      border-radius: 200px;  211      box-shadow: 0px 0px 20px 5px #00f1ee;     212      -moz-box-shadow: 0px 0px 20px 5px #00f1ee;     213      -webkit-box-shadow: 0px 0px 20px 5px #00f1ee;   214  } 

              And the HTML for the example shown above


              // HTML CODE
                 0  <div class="mb-cloud">   1       <div class="cloud1"></div>    2       <div class="cloud2"></div>    3       <div class="cloud3"></div>    4       <div class="cloud4"></div>    5       <div class="cloud5"></div>    6       <div class="cloud6"></div>    7   </div> 


                Sind CSS Animationen "schlecht"?


                Natürlich nicht. In der Tat sind sie ideal für einfache Übergänge zwischen Zuständen (wie Rollovers), wenn die Kompatibilität mit älteren Browsern nicht erforderlich ist. 3D-Transformationen funktionieren normalerweise sehr gut (iOS7 ist eine bemerkenswerte Ausnahme), und CSS-Animationen können für Entwickler sehr attraktiv sein, die es vorziehen, ihre gesamte Animations- und Präsentationslogik in die CSS-Ebene zu integrieren. JavaScript-basierte Animationen bieten jedoch weitaus mehr Flexibilität, einen besseren Workflow für komplexe Animationen und eine reichhaltige Interaktivität und sind oft genauso schnell (oder sogar schneller) als CSS-basierte Animationen, trotz allem, was Du vielleicht gehört hast.

                Dein Kommentar

                * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
                Du kannst diese Tags verwenden: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
                ?

                Dieses Feld ist optional
                Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

                Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

                Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
                tnado SEO & AMP CMS © 2019 | Alle Rechte Vorbehalten
                Created with tnado SEO CMS