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