CSS3 Animation Experiment – Virtual DJ

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!