CSS3 Animation Experiment – Virtual DJ

Today I made up my mind to prepare nice CSS3 experiment. I wanted to create a nice looking environment with a lot of moving elements. As background, I selected DJ music console. In this demo anything is movable only with CSS3 (without any javascript). I used various css3 technics like keyframes, animation, transformation (rotation and scale). Welcome to test it.

Live Demo
download result

So, lets start


Step 1. HTML

Everything is very easy, isn’t it? As you can see – it contains a lot of different images.

index.html

01 <div class="vdj">
02     <img src="images/back.jpg">
03     <img class="v1" src="images/v1.png">
04     <img class="v2" src="images/v2.png">
05     <img class="v3" src="images/v3.png">
06     <img class="v4" src="images/v4.png">
07     <img class="s1" src="images/speaker.png">
08     <img class="si1" src="images/speaker-in.png">
09     <img class="s2" src="images/speaker.png">
10     <img class="si2" src="images/speaker-in.png">
11     <img class="s3" src="images/speaker.png">
12     <img class="si3" src="images/speaker-in.png">
13     <img class="s4" src="images/speaker.png">
14     <img class="si4" src="images/speaker-in.png">
15     <img class="slid1" src="images/slid1.png">
16     <img class="slid2" src="images/slid1.png">
17     <img class="b1" src="images/but1.png">
18     <img class="b2" src="images/but2.png">
19     <img class="b3" src="images/but3.png">
20     <img class="b4" src="images/but1.png">
21     <img class="b5" src="images/but2.png">
22     <img class="b6" src="images/but3.png">
23     <img class="eq" src="images/space.gif">
24     <img class="eq2" src="images/space.gif">
25 </div>

Step 2. CSS

Now, its time to style our musical demo. Don’t forget to include our CSS file in the head section of the result page.

css/main.css

001 /* virtual dj */
002 .vdj {
003     margin100px auto 0;
004     positionrelative;
005     width800px;
006 }
007 /* vinyl keyframes */
008 @-webkit-keyframes vinyl {
009     0% {
010         -moz-transform: rotate(0deg);
011         -webkit-transform: rotate(0deg);
012     }
013     100% {
014         -moz-transform: rotate(360deg);
015         -webkit-transform: rotate(360deg);
016     }
017 }
018 @-moz-keyframes vinyl {
019     0% {
020         -moz-transform: rotate(0deg);
021         -webkit-transform: rotate(0deg);
022     }
023     100% {
024         -moz-transform: rotate(360deg);
025         -webkit-transform: rotate(360deg);
026     }
027 }
028 .v1, .v2, .v3, .v4 {
029     /* css3 animation */
030     -moz-animation-name: vinyl;
031     -moz-animation-duration: 3s;
032     -moz-animation-timing-function: linear;
033     -moz-animation-iteration-count: infinite;
034     -moz-animation-directionnormal;
035     -moz-animation-delay: 0;
036     -moz-animation-play-state: running;
037     -moz-animation-fill-mode: forwards;
038     -webkit-animation-name: vinyl;
039     -webkit-animation-duration: 3s;
040     -webkit-animation-timing-function: linear;
041     -webkit-animation-iteration-count: infinite;
042     -webkit-animation-directionnormal;
043     -webkit-animation-delay: 0;
044     -webkit-animation-play-state: running;
045     -webkit-animation-fill-mode: forwards;
046 }
047 .v1 {
048     left83px;
049     positionabsolute;
050     top77px;
051 }
052 .v2 {
053     left580px;
054     positionabsolute;
055     top77px;
056 }
057 .v3 {
058     left66px;
059     positionabsolute;
060     top382px;
061 }
062 .v4 {
063     left634px;
064     positionabsolute;
065     top382px;
066 }
067 /* speaker keyframes */
068 @-webkit-keyframes speaker {
069     0% {
070         -moz-transform: scale(0.75);
071         -webkit-transform: scale(0.75);
072     }
073     45% {
074         -moz-transform: scale(0.85);
075         -webkit-transform: scale(0.85);
076     }
077     100% {
078         -moz-transform: scale(0.75);
079         -webkit-transform: scale(0.75);
080     }
081 }
082 @-moz-keyframes speaker {
083     0% {
084         -moz-transform: scale(0.75);
085         -webkit-transform: scale(0.75);
086     }
087     45% {
088         -moz-transform: scale(0.85);
089         -webkit-transform: scale(0.85);
090     }
091     100% {
092         -moz-transform: scale(0.75);
093         -webkit-transform: scale(0.75);
094     }
095 }
096 .si1, .si2, .si3, .si4 {
097     /* css3 transform */
098     -webkit-transform:scale(0.75);
099     -moz-transform:scale(0.75);
100     -ms-transform:scale(0.75);
101     -o-transform:scale(0.75);
102     transform:scale(0.75);
103     /* css3 animation */
104     -moz-animation-name: speaker;
105     -moz-animation-duration: 0.5s;
106     -moz-animation-timing-function: linear;
107     -moz-animation-iteration-count: infinite;
108     -moz-animation-directionnormal;
109     -moz-animation-delay: 0;
110     -moz-animation-play-state: running;
111     -moz-animation-fill-mode: forwards;
112     -webkit-animation-name: speaker;
113     -webkit-animation-duration: 0.5s;
114     -webkit-animation-timing-function: linear;
115     -webkit-animation-iteration-count: infinite;
116     -webkit-animation-directionnormal;
117     -webkit-animation-delay: 0;
118     -webkit-animation-play-state: running;
119     -webkit-animation-fill-mode: forwards;
120 }
121 .si1 {
122     left541px;
123     positionabsolute;
124     top249px;
125 }
126 .s1 {
127     left545px;
128     positionabsolute;
129     top253px;
130 }
131 .si2 {
132     left606px;
133     positionabsolute;
134     top249px;
135     /* css3 animation delay */
136     -moz-animation-delay: 0.25s;
137     -webkit-animation-delay: 0.25s;
138 }
139 .s2 {
140     left610px;
141     positionabsolute;
142     top253px;
143 }
144 .si3 {
145     left671px;
146     positionabsolute;
147     top249px;
148 }
149 .s3 {
150     left675px;
151     positionabsolute;
152     top253px;
153 }
154 .si4 {
155     left735px;
156     positionabsolute;
157     top249px;
158     /* css3 animation delay */
159     -moz-animation-delay: 0.25s;
160     -webkit-animation-delay: 0.25s;
161 }
162 .s4 {
163     left739px;
164     positionabsolute;
165     top253px;
166 }
167 /* slider keyframes */
168 @-webkit-keyframes slider {
169     0% {
170         margin-top:0px;
171     }
172     50% {
173         margin-top:90px;
174     }
175     100% {
176         margin-top:0px;
177     }
178 }
179 @-moz-keyframes slider {
180     0% {
181         margin-top:0px;
182     }
183     50% {
184         margin-top:90px;
185     }
186     100% {
187         margin-top:0px;
188     }
189 }
190 .slid1, .slid2 {
191     /* css3 animation */
192     -moz-animation-name: slider;
193     -moz-animation-duration: 2.0s;
194     -moz-animation-timing-function: linear;
195     -moz-animation-iteration-count: infinite;
196     -moz-animation-directionnormal;
197     -moz-animation-delay: 0;
198     -moz-animation-play-state: running;
199     -moz-animation-fill-mode: forwards;
200     -webkit-animation-name: slider;
201     -webkit-animation-duration: 2.0s;
202     -webkit-animation-timing-function: linear;
203     -webkit-animation-iteration-count: infinite;
204     -webkit-animation-directionnormal;
205     -webkit-animation-delay: 0;
206     -webkit-animation-play-state: running;
207     -webkit-animation-fill-mode: forwards;
208 }
209 .slid1 {
210     left254px;
211     positionabsolute;
212     top94px;
213 }
214 .slid2 {
215     left751px;
216     positionabsolute;
217     top94px;
218     /* css3 animation delay */
219     -moz-animation-delay: -1.0s;
220     -webkit-animation-delay: -1.0s;
221 }
222 /* buttons keyframes */
223 @-webkit-keyframes buttons {
224     0% {
225         opacity: 1;
226     }
227     45% {
228         opacity: 0;
229     }
230     100% {
231         opacity: 1;
232     }
233 }
234 @-moz-keyframes buttons {
235     0% {
236         opacity: 1;
237     }
238     45% {
239         opacity: 0;
240     }
241     100% {
242         opacity: 1;
243     }
244 }
245 .b1, .b2, .b3, .b4, .b5, .b6 {
246     /* css3 animation */
247     -moz-animation-name: buttons;
248     -moz-animation-duration: 1.0s;
249     -moz-animation-timing-function: linear;
250     -moz-animation-iteration-count: infinite;
251     -moz-animation-directionnormal;
252     -moz-animation-delay: 0;
253     -moz-animation-play-state: running;
254     -moz-animation-fill-mode: forwards;
255     -webkit-animation-name: buttons;
256     -webkit-animation-duration: 1.0s;
257     -webkit-animation-timing-function: linear;
258     -webkit-animation-iteration-count: infinite;
259     -webkit-animation-directionnormal;
260     -webkit-animation-delay: 0;
261     -webkit-animation-play-state: running;
262     -webkit-animation-fill-mode: forwards;
263 }
264 .b1 {
265     left17px;
266     positionabsolute;
267     top105px;
268 }
269 .b2 {
270     left17px;
271     positionabsolute;
272     top147px;
273     /* css3 animation delay */
274     -moz-animation-delay: 0.3s;
275     -webkit-animation-delay: 0.3s;
276 }
277 .b3 {
278     left17px;
279     positionabsolute;
280     top190px;
281     /* css3 animation delay */
282     -moz-animation-delay: 0.6s;
283     -webkit-animation-delay: 0.6s;
284 }
285 .b4 {
286     left513px;
287     positionabsolute;
288     top105px;
289     /* css3 animation delay */
290     -moz-animation-delay: 0.3s;
291     -webkit-animation-delay: 0.3s;
292 }
293 .b5 {
294     left513px;
295     positionabsolute;
296     top147px;
297     /* css3 animation delay */
298     -moz-animation-delay: 0.6s;
299     -webkit-animation-delay: 0.6s;
300 }
301 .b6 {
302     left513px;
303     positionabsolute;
304     top190px;
305 }
306 /* eq keyframes */
307 @-webkit-keyframes eq {
308     0% {
309         background-position0 0;
310     }
311     100% {
312         background-position0 -92px;
313     }
314 }
315 @-moz-keyframes eq {
316     0% {
317         background-position0 0;
318     }
319     100% {
320         background-position0 -92px;
321     }
322 }
323 .eq {
324     backgroundurl("../images/eq.png"no-repeat scroll center top transparent;
325     height92px;
326     left197px;
327     positionabsolute;
328     top389px;
329     width18px;
330     /* css3 animation */
331     -moz-animation-name: eq;
332     -moz-animation-duration: 2.0s;
333     -moz-animation-timing-function: linear;
334     -moz-animation-iteration-count: infinite;
335     -moz-animation-directionnormal;
336     -moz-animation-delay: 0;
337     -moz-animation-play-state: running;
338     -moz-animation-fill-mode: forwards;
339     -webkit-animation-name: eq;
340     -webkit-animation-duration: 2.0s;
341     -webkit-animation-timing-function: linear;
342     -webkit-animation-iteration-count: infinite;
343     -webkit-animation-directionnormal;
344     -webkit-animation-delay: 0;
345     -webkit-animation-play-state: running;
346     -webkit-animation-fill-mode: forwards;
347 }
348 /* eq2 keyframes */
349 @-webkit-keyframes eq2 {
350     0% {
351         background-position0 0;
352     }
353     100% {
354         background-position-260px 0;
355     }
356 }
357 @-moz-keyframes eq2 {
358     0% {
359         background-position0 0;
360     }
361     100% {
362         background-position-260px 0;
363     }
364 }
365 .eq2 {
366     backgroundurl("../images/eq2.png"no-repeat scroll center top transparent;
367     height28px;
368     left271px;
369     positionabsolute;
370     top240px;
371     width260px;
372     /* css3 animation */
373     -moz-animation-name: eq2;
374     -moz-animation-duration: 6.0s;
375     -moz-animation-timing-function: linear;
376     -moz-animation-iteration-count: infinite;
377     -moz-animation-directionnormal;
378     -moz-animation-delay: 0;
379     -moz-animation-play-state: running;
380     -moz-animation-fill-mode: forwards;
381     -webkit-animation-name: eq2;
382     -webkit-animation-duration: 6.0s;
383     -webkit-animation-timing-function: linear;
384     -webkit-animation-iteration-count: infinite;
385     -webkit-animation-directionnormal;
386     -webkit-animation-delay: 0;
387     -webkit-animation-play-state: running;
388     -webkit-animation-fill-mode: forwards;
389 }

I think that everything should be very easy for you. I used -moz and -webkit prefixes in order to teach it works in FF and Webkit-based browsers (Chrome and Safari).


Live Demo
download result

Conclusion

Thats all, today we have created new animated demonstration with CSS3. You are free to modify our result and use it at your websites. Feel free to share our tutorials with your friends. Good luck!