Rotating gears with css

A demonstration of how to produce an animated backdrop using css and html.

by Steve Adams

HTML

<div id="cogs">
    <img id="cogOne" src="http://i.imgur.com/LrC5U.png" />
    <img id="cogTwo" src="http://i.imgur.com/vUFqR.png" />
</div>
<div id="content">
    <h1>Here is your content container!</h1>
    <p>The gears in the background are rotating png files. You could probably use canvas to draw vector based images on the fly... Less server requests, more efficient drawing, and better control over animation. Also better control over everything, really. You'd place the canvas the same way as the div with the id of 'cogs', only it would be <code>&lt;canvas id="cogs"&gt;</code> instead.</p>
    <p>With this solution we run into the issue that the cogs do not reposition and they do not resize. That could probably be resolved with javascript within canvas, but with css, I have a feeling it's not possible. I'd do some research to be sure.</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,300,600);

@-webkit-keyframes rotateCogOne {
    0% { -webkit-transform:rotate(10deg); }
    100% { -webkit-transform:rotate(370deg); }
}

@-moz-keyframes rotateCogOne {
    0% { -moz-transform:rotate(10deg); }
    100% { -moz-transform:rotate(370deg); }
}

@keyframes rotateCogOne {
    0% { transform:rotate(10deg); }
    100% { transform:rotate(370deg); }
}

@-webkit-keyframes rotateCogTwo {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(-360deg); }
}

@-moz-keyframes rotateCogTwo {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(-360deg); }
}

@keyframes rotateCogTwo {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(-360deg); }
}

html {
    height: 100%;
    width: 100%;
    background: rgb(39, 42, 61);
}

body {
    width: 100%;
    height: 100%;
}

#cogs {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -100;
}

#cogOne {
    position: absolute;
    top: -500px;
    left: -500px;
    -webkit-animation: rotateCogOne 60s infinite linear;
    -moz-animation: rotateCogOne 60s infinite linear;
    animation: rotateCogOne 60s infinite linear;
}

#cogTwo {
    position: absolute;
    top: 270px;
    left: 270px;
    -webkit-animation: rotateCogTwo 30s infinite linear;
    -moz-animation: rotateCogTwo 30s infinite linear;
    animation: rotateCogTwo 30s infinite linear;
}

#content {
    width: 80%;
    margin: 0 auto;
    padding: 5% 10%;
    text-align: left;
    font-family: 'Open Sans';
    background: rgba(0,0,0,.25);
    color: #fff;
}

h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 10px auto;
}

p {
    margin: 10px auto;
    font-weight: 300;
}