/ Web Dev Zone
Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS3 Animation Experiment – Virtual DJ

DZone's Guide to

CSS3 Animation Experiment – Virtual DJ

by
·
Apr. 14, 12 · Web Dev Zone ·
Free Resource

Comment (0)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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

Live Demo

download result

So, let's start!

Step 1. HTML

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

index.html

<div class="vdj">
    <img src="images/back.jpg">
    <img class="v1" src="images/v1.png">
    <img class="v2" src="images/v2.png">
    <img class="v3" src="images/v3.png">
    <img class="v4" src="images/v4.png">
    <img class="s1" src="images/speaker.png">
    <img class="si1" src="images/speaker-in.png">
    <img class="s2" src="images/speaker.png">
    <img class="si2" src="images/speaker-in.png">
    <img class="s3" src="images/speaker.png">
    <img class="si3" src="images/speaker-in.png">
    <img class="s4" src="images/speaker.png">
    <img class="si4" src="images/speaker-in.png">
    <img class="slid1" src="images/slid1.png">
    <img class="slid2" src="images/slid1.png">
    <img class="b1" src="images/but1.png">
    <img class="b2" src="images/but2.png">
    <img class="b3" src="images/but3.png">
    <img class="b4" src="images/but1.png">
    <img class="b5" src="images/but2.png">
    <img class="b6" src="images/but3.png">

    <img class="eq" src="images/space.gif">
    <img class="eq2" src="images/space.gif">
</div>

Step 2. CSS

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

css/main.css

/* virtual dj */
.vdj {
    margin: 100px auto 0;
    position: relative;
    width: 800px;
}

/* vinyl keyframes */
@-webkit-keyframes vinyl {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes vinyl {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
.v1, .v2, .v3, .v4 {
    /* css3 animation */
    -moz-animation-name: vinyl;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: vinyl;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
.v1 {
    left: 83px;
    position: absolute;
    top: 77px;
}
.v2 {
    left: 580px;
    position: absolute;
    top: 77px;
}
.v3 {
    left: 66px;
    position: absolute;
    top: 382px;
}
.v4 {
    left: 634px;
    position: absolute;
    top: 382px;
}

/* speaker keyframes */
@-webkit-keyframes speaker {
    0% {
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
    }
    45% {
        -moz-transform: scale(0.85);
        -webkit-transform: scale(0.85);
    }
    100% {
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
    }
}
@-moz-keyframes speaker {
    0% {
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
    }
    45% {
        -moz-transform: scale(0.85);
        -webkit-transform: scale(0.85);
    }
    100% {
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
    }
}
.si1, .si2, .si3, .si4 {
    /* css3 transform */
    -webkit-transform:scale(0.75);
    -moz-transform:scale(0.75);
    -ms-transform:scale(0.75);
    -o-transform:scale(0.75);
    transform:scale(0.75);

    /* css3 animation */
    -moz-animation-name: speaker;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: speaker;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
.si1 {
    left: 541px;
    position: absolute;
    top: 249px;
}
.s1 {
    left: 545px;
    position: absolute;
    top: 253px;
}
.si2 {
    left: 606px;
    position: absolute;
    top: 249px;

    /* css3 animation delay */
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
.s2 {
    left: 610px;
    position: absolute;
    top: 253px;
}
.si3 {
    left: 671px;
    position: absolute;
    top: 249px;
}
.s3 {
    left: 675px;
    position: absolute;
    top: 253px;
}
.si4 {
    left: 735px;
    position: absolute;
    top: 249px;

    /* css3 animation delay */
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
.s4 {
    left: 739px;
    position: absolute;
    top: 253px;
}

/* slider keyframes */
@-webkit-keyframes slider {
    0% {
        margin-top:0px;
    }
    50% {
        margin-top:90px;
    }
    100% {
        margin-top:0px;
    }
}
@-moz-keyframes slider {
    0% {
        margin-top:0px;
    }
    50% {
        margin-top:90px;
    }
    100% {
        margin-top:0px;
    }
}
.slid1, .slid2 {
    /* css3 animation */
    -moz-animation-name: slider;
    -moz-animation-duration: 2.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: slider;
    -webkit-animation-duration: 2.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
.slid1 {
    left: 254px;
    position: absolute;
    top: 94px;
}
.slid2 {
    left: 751px;
    position: absolute;
    top: 94px;

    /* css3 animation delay */
    -moz-animation-delay: -1.0s;
    -webkit-animation-delay: -1.0s;
}

/* buttons keyframes */
@-webkit-keyframes buttons {
    0% {
        opacity: 1;
    }
    45% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes buttons {
    0% {
        opacity: 1;
    }
    45% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.b1, .b2, .b3, .b4, .b5, .b6 {
    /* css3 animation */
    -moz-animation-name: buttons;
    -moz-animation-duration: 1.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: buttons;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
.b1 {
    left: 17px;
    position: absolute;
    top: 105px;
}
.b2 {
    left: 17px;
    position: absolute;
    top: 147px;

    /* css3 animation delay */
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
.b3 {
    left: 17px;
    position: absolute;
    top: 190px;

    /* css3 animation delay */
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
.b4 {
    left: 513px;
    position: absolute;
    top: 105px;

    /* css3 animation delay */
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
.b5 {
    left: 513px;
    position: absolute;
    top: 147px;

    /* css3 animation delay */
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
.b6 {
    left: 513px;
    position: absolute;
    top: 190px;
}

/* eq keyframes */
@-webkit-keyframes eq {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -92px;
    }
}
@-moz-keyframes eq {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -92px;
    }
}
.eq {
    background: url("../images/eq.png") no-repeat scroll center top transparent;
    height: 92px;
    left: 197px;
    position: absolute;
    top: 389px;
    width: 18px;

    /* css3 animation */
    -moz-animation-name: eq;
    -moz-animation-duration: 2.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: eq;
    -webkit-animation-duration: 2.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

/* eq2 keyframes */
@-webkit-keyframes eq2 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -260px 0;
    }
}
@-moz-keyframes eq2 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -260px 0;
    }
}
.eq2 {
    background: url("../images/eq2.png") no-repeat scroll center top transparent;
    height: 28px;
    left: 271px;
    position: absolute;
    top: 240px;
    width: 260px;

    /* css3 animation */
    -moz-animation-name: eq2;
    -moz-animation-duration: 6.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: eq2;
    -webkit-animation-duration: 6.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

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

Live Demo

download result

Conclusion

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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Like This Article? Read More From DZone

New Cloud-Native Services and SAP Cloud Platform, ABAP Environment
Building Redis from Source on Ubuntu Server 18.04
Measuring the ROI of Low-Code

Free DZone Refcard

Node.js
DOWNLOAD
Topics:

Comment (0)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)
Top 10 JavaScript Errors and How to Avoid Them
Integrate Feature Flags in Angular
Strategies for Improving Your Debugging Workflow
A Brief Overview of Indigo.Design, an End-to-End Design and Development Platform
Test in Production (the Netflix Way)
From Design to Code: Indigo.Design’s Unified Platform for Sketch and Angular Teams
Angular Essentials eBook: Provides Step-by-Step Guidance to Angular
Remove Guesswork and Save Time Prioritizing Your Workflow
App-centric Monitoring Alternatives to New Relic
Customer Success Strategy: Using Bugsnag for Proactive Customer Support
Adopt Continuous Delivery Without Harming End Users

Web Dev Partner Resources

How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)
Top 10 JavaScript Errors and How to Avoid Them
Integrate Feature Flags in Angular
Strategies for Improving Your Debugging Workflow

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.linkDescription }}

{{ parent.urlSource.name }}
by {{ parent.authors[0].realName || parent.author}}
· {{ parent.articleDate | date:'MMM. dd, yyyy' }} {{ parent.linkDate | date:'MMM. dd, yyyy' }}
· {{ parent.portal.name }} Zone