/ 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
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!

Like This Article? Read More From DZone

Conversational AI: Design and Build a Contextual AI Assistant
Build a Xamarin Android Mobile Application Using Azure DevOps (CI)
Adding Transparent Data Encryption to InfinityDB

Free DZone Refcard

Getting Started With Java-Based CMS
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

{{ 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