DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Which Is Better for IoT: Azure RTOS or FreeRTOS?
  • What ChatGPT Needs Is Context
  • Security Challenges for Microservice Applications in Multi-Cloud Environments
  • DevOps Midwest: A Community Event Full of DevSecOps Best Practices

Trending

  • Which Is Better for IoT: Azure RTOS or FreeRTOS?
  • What ChatGPT Needs Is Context
  • Security Challenges for Microservice Applications in Multi-Cloud Environments
  • DevOps Midwest: A Community Event Full of DevSecOps Best Practices
  1. DZone
  2. Coding
  3. Languages
  4. CSS3 Animation Experiment – Virtual DJ

CSS3 Animation Experiment – Virtual DJ

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
Apr. 14, 12 · Interview
Like (0)
Save
Tweet
Share
4.82K Views

Join the DZone community and get the full member experience.

Join For Free
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!

CSS

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Which Is Better for IoT: Azure RTOS or FreeRTOS?
  • What ChatGPT Needs Is Context
  • Security Challenges for Microservice Applications in Multi-Cloud Environments
  • DevOps Midwest: A Community Event Full of DevSecOps Best Practices

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: