Div Animation Using CSS3

Sudhir Choudhary
Mar 06, 2013
5.4k
0
0
Article

Introduction

Today you will learn about animation divs using CSS3. You can rotate a div and content without Flash and jQuery. I will also describe box-shadow and border radius using CSS3.

Step 1
<!doctype HTML>
<html>
<head>
    <title></title>
    <style>
        #main {
            height: 500px;
            width: 1024px;
            margin: 0 auto;
            border: 1px solid #333333;
            background: #CCCCCC;
        }
        #animation {
            height: 150px;
            width: 230px;
            margin: 70px 0 0 243px;
              }
    </style>
</head>
<body>
    <div id="main">
        <div id="animation">

            <h2 >On Mouse Hover</h2>
        </div>
    </div>
</body>
</html>

Step 2

The CSS3 border-radius property allows web developers to easily utilize rounded corners in their design elements, without the need for corner images or the use of multiple div tags, and you can also write it like this:

border-bottom-left-radius : 20px; border-bottom-right-radius : 20px; border-top-left-radius : 20px; border-top-right-radius : 20px;

            -webkit-border-radius: 20px;/*chrome
            -moz-border-radius: 20px;/*mozila
            -o-border-radius: 20px;/*opera
            -ms-border-radius: 20px;/*I.E 9

The code above produces the output below.

Step 3
The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and spread. For example:

            -webkit-box-shadow: 5px 8px 10px rgb(123,34,54);/*chrome
            -moz-box-shadow: 5px 8px 10px rgb(123,34,54);/*mozila
            -o-box-shadow: 5px 8px 10px rgb(123,34,54);/*opera
            -ms-box-shadow: 5px 8px 10px rgb(123,34,54;/*I.E 9

The box-shadow property can accept a comma-separated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional "inset" keyword (to create an inner shadow, rather than the default outer shadow).

output.

Step 4: Final code

<!doctype HTML>
<html>
<head>
    <title></title>
    <style>
        #main {
            height: 500px;
            width: 1024px;
            margin: 0 auto;
            border: 1px solid #333333;
            background: #CCCCCC;
        }
        #animation {
            height: 150px;
            width: 230px;
            border: 1px solid #330099;
            margin: 70px 0 0 243px;
            -webkit-border-radius: 20px;/*chrome
            -moz-border-radius: 20px;/*mozila
            -o-border-radius: 20px;/*opera
            -ms-border-radius: 20px;/*I.E 9
            -webkit-box-shadow: 5px 8px 10px rgb(123,34,54);/*chrome
            -moz-box-shadow: 5px 8px 10px rgb(123,34,54);/*mozila
            -o-box-shadow: 5px 8px 10px rgb(123,34,54);/*opera
            -ms-box-shadow: 5px 8px 10px rgb(123,34,54;/*I.E 9
            opacity: 0.3;
            background: #999999;
            -webkit-transition: -webkit-transform 2s,width 4s, opacity 3s;/*chrome
            -moz-transition: -moz-transform 2s,width 4s, opacity 3s;/*mozila
            -o-transition: -o-transform 2s,width 4s, opacity 3s;/*opera
            -ms-transition: -ms-transform 2s,width 4s, opacity 3s;/*I.E 9
        }
        h2 {

            opacity: 1;
            margin: 51px 0 0 23px;
            text-align: center;
        }

        #animation:hover {
            width: 350px;
            height: 300px;
            -webkit-transform: rotate(360deg);/*chrome Yes
            -moz-transform: rotate(360deg);/*mozila No
            -o-transform: rotate(360deg);/*opera
            -ms-transform: rotate(360deg);/*I.E 9
             opacity: 1;

        }
    </style>
</head>
<body>
    <div id="main">
        <div id="animation">

            <h2 >On Mouse Hover</h2>
        </div>
    </div>
</body>
</html>