/ 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
Andrey Prikaznov
·
Apr. 14, 12 · Web Dev Zone
Free Resource

Comment (0)

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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software. 

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!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Like This Article? Read More From DZone

All About Errors in Swift
Lobotomize Your OO Thinking: “Elegant Objects, Vol. 1” Book Review
What's the Max Number of Users You Can Test on JMeter?

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 Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

Getting Started with Node.js, Docker, and Kubernetes
Over 80% of .NET developers choose Highcharts
The Node.js ecosystem has done an absolutely fantastic job in providing tools that help speed development workflows and streamline the process of writing and shipping code.
A Guide to Modern Java Web Development with Crafter CMS
Create Data Driven Apps Faster by Eliminating Query Writing
Highcharts brings it's industry-leading charting library to iOS
Qlik PlaygroundTM: A free coding environment to simplify data driven development
Learn How Qlik Tech Cracked Search
7 Reasons Why Crafter Should Be On Your Web CMS Shortlist
Building and Optimizing Multi-Channel Web Experiences

Web Dev Partner Resources

Getting Started with Node.js, Docker, and Kubernetes
Over 80% of .NET developers choose Highcharts
The Node.js ecosystem has done an absolutely fantastic job in providing tools that help speed development workflows and streamline the process of writing and shipping code.
A Guide to Modern Java Web Development with Crafter CMS
THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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