CSS3 Animation

CSS3 has been around for a few years now and what an impact it has made on web design. In the first tutorial we will be animating a Grandfather clock.

Basic HTML Page

First you need to create the basic HTML page with just a few lines of code. There are five parts of the clock included here:

1. Clock body
2. Clock dial
3. Hour hand
4. Minute hand
5. Pendulum

<div id="clockBody">
    <div id="clockDial">
        <div id="hourHand"></div>
        <div id="minuteHand"></div>
    </div>
    <div id="pendulum"></div>
</div>

Add CSS to style the clock

Next you add the CSS code to create the basic shapes for the clock. Using the CSS3 border-radius to create circles from the default square div tags. See the working example here

#clockBody{
    width: 200px;
    height: 700px;
    border: 2px solid darkred;
    background-color: saddlebrown;
    padding-top: 50px;
}

#clockDial{
    width: 120px;
    height: 120px;
    border-radius: 90px;
    background-color: ivory;
    border: 1px solid orange;
    margin: 0 auto;
}

#hourHand{
    width: 8px;
    height: 40px;
    background-color: #222;
    position: absolute;
    left: 105px;
    top: 120px;
}

#minuteHand{
    width: 15px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 105px;
    top: 120px;
}

#pendulum{
    width: 9px;
    height: 220px;
    background-color: darkorange;
    position: absolute;
    left: 110px;
}

Animate the clock hands

Now we make the clock hands rotate using keyframes. As a test we don’t use real time, so the hands will move faster than a real clock. Edit the animation-duration property to change the rotation speed.

@-moz-keyframes hourTick{
    from{ -moz-transform:rotate(0deg)}
    to{ -moz-transform:rotate(360deg)}
}

@-webkit-keyframes swingTick{
    0% {-webkit-transform:rotate(15deg) }

    50% { -webkit-transform:rotate(-15deg) }
    100% { -webkit-transform:rotate(15deg)}
}

@-moz-keyframes swingTick{
    from{ -moz-transform:rotate(0deg)}
    to{ -moz-transform:rotate(360deg)}
}
#hourHand{
    width: 8px;
    height: 40px;
    background-color: #222;
    position: absolute;
    left: 105px;
    top: 120px;

/*CSS3 animation code*/
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 4px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: hourTick;
    -moz-animation-name: hourTick;
    -webkit-animation-duration: 600s;
    -moz-animation-duration: 600s;
}

#minuteHand{
    width: 15px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 105px;
    top: 120px;

/*CSS3 animation code*/
    -webkit-transform-origin: 2px 0px;
    -moz-transform-origin: 2px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: minuteTick;
    -moz-animation-name: minuteTick;
    -webkit-animation-duration: 60s;
    -moz-animation-duration: 60s;
}

Make the pendulum swing

Next we animate the pendulum using the animation-timing-function’s ease-in-out property. This adds realistic movement with acceleration effects of gravity

#pendulum{
    width: 9px;
    height: 220px;
    background-color: darkorange;
    position: absolute;
    left: 110px;

/*CSS3 animation code*/
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 0px 0px;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: swingTick;
    -moz-animation-name: swingTick;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;

}

Add the images

Finally we add the graphic elements that make the clock more realistic. The images are vector based and create a simple, 2D animation. The clock body and dial use CSS background images while the pendulum and clock hands are images inserted into the HTML code.

   #clockBody{
    width: 200px;
    height: 500px;
    border: 2px solid saddlebrown;
    background-color: sandybrown;
    padding-top: 50px;
    background-image: url("http://www.portfour.com/homepage/wp-content/uploads/2014/07/clock_body.png");
    background-size: 200px;
    background-repeat: no-repeat;
}

#clockDial{
    width: 120px;
    height: 120px;
    border-radius: 90px;
    background-color: ivory;
    border: 1px solid orange;
    margin: 0 auto;
    background-image: url("http://www.portfour.com/homepage/wp-content/uploads/2014/07/dial.png");
    background-size: 120px;
}

#hourHand{
    width: 8px;
    height: 40px;
    background-color: transparent;
    position: absolute;
    left: 108px;
    top: 120px;
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 4px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: hourTick;
    -moz-animation-name: hourTick;
    -webkit-animation-duration: 600s;
    -moz-animation-duration: 600s;
}
#hourHand img{
    position: relative;
    top: -8px;
    left: 0px;
}
#minuteHand{
    width: 6px;
    height: 60px;
    background-color: transparent;
    position: absolute;
    left: 110px;
    top: 120px;
    -webkit-transform-origin: 4px 0px;
    -moz-transform-origin: 4px 0px;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: minuteTick;
    -moz-animation-name: minuteTick;
    -webkit-animation-duration: 60s;
    -moz-animation-duration: 60s;
}
#minuteHand img{
    position: relative;
    top: -10px;
    left: 0px;
}
#pendulum{
    width: 9px;
    height: 220px;
    background-color: transparent;
    position: absolute;
    left: 110px;
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: swingTick;
    -moz-animation-name: swingTick;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;

}
#pendulum img{
    position: relative;
    left: -24px;
}