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 CSS oder auch mit transform translate, das ist dir überlassen.
Die meisten Vergleiche im Internet peggen CSS animation 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.
CSS Keyframes 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 animation und keyframes, weiter unten findest Du den Code dafür. Wir machen hier nichts anderes als die Elemente außerhalb des sichtbaren Bereichs zu platzieren. Dies tun wir z.B. mit
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
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.
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
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
0 animation: cloud1 50s infinite linear; TIPP
Du kannst hover so wie andere Pseudoelemente verwenden um CSS events zu feuern.
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 Keyframes Animationen gedacht, auch JavaScript-Animationen können davon profitieren!
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.
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
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 animation 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.
Anzeige