Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Simple CSS3 Animation Example

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 560
    Comment on it

    Hi,

    Here is an example of a simple animation showing a tree growing on the field and then some rays coming over it.
    Free Web Proxy For this I will be using following images.

    Free Web Proxy
    bg.jpg



    Free Web Proxy
    treetrunk.png



    Free Web Proxy
    branches.png



    Free Web Proxy
    rays.png



    Free Web Proxy
    shadow.png


    You might be unable to see ray.png. Don't worry about that. It has very low opacity. Just download all above images to any folder of your choice.

    I will be using following HTML Code:

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Untitled Document</title>
            <style>
            </style>
            <link href="tree.css" rel="stylesheet" type="text/css">
        </head>
        <body>
                <div class="bg">
                    <div class="treetrunk"></div>
                    <div class="branches"></div>
                    <div class="shadow"></div>
                    <div class="rays"></div>
                </div>
        </body>
    </html>
    

    Save it with any name.

    I will also require a CSS file named as tree.css. The code for CSS is:

    .bg{
        position:relative;
        height:132px;
        width:308px;
        background-image:url('bg.jpg');
    }
    .treetrunk{
        position: absolute;
        width: 37px;
        height: 54px;
        transform-origin: bottom;
        left: 199px;
        top: 58px;
        background-image: url('treetrunk.png');
        z-index: 2;
        clip: rect(54px,37px,54px,0px);
        -webkit-clip: rect(54px,37px,54px,0px);
    
        animation-name: showtrunk;
        animation-duration: 2s;
        animation-delay: 0px;
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-timing-function: normal;
        animation-fill-mode: forwards;
    
        -webkit-animation-name: showtrunk;
        -webkit-animation-duration: 2s;
        -webkit-animation-delay: 0px;
        -webkit-animation-direction: normal;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: normal;
        -webkit-animation-fill-mode: forwards;
    }
    
    .branches{
        width:105px;
        height:69px;
        position:absolute;
        left:167px;
        top:43px;
        background-image:url('branches.png');
        z-index:1;
        transform:scale(0,0);
        transform-origin:center;
        -webkit-transform:scale(0,0);
        -webkit-transform-origin:center;
        -webkit-animation-name: showbranches;
        -webkit-animation-duration: 2s;
        -webkit-animation-delay: 2s;
        -webkit-animation-direction: normal;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: normal;
        -webkit-animation-fill-mode: forwards;
        animation-name: showbranches;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-timing-function: normal;
        animation-fill-mode: forwards;
        opacity:0;
    }
    .shadow{
        width:71px;
        height:13px;
        position:absolute;
        left:193px;
        top:111px;
        background-image:url('shadow.png');
        z-index:3;
        opacity:0;
        transform-origin:top;
        transform:scale(0,0);
        -webkit-transform-origin:top;
        -webkit-transform:scale(0,0);
        -webkit-animation-name: showbranches;
        -webkit-animation-duration: 2s;
        -webkit-animation-delay: 2s;
        -webkit-animation-direction: normal;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: normal;
        -webkit-animation-fill-mode: forwards;
        animation-name: showbranches;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-timing-function: normal;
        animation-fill-mode: forwards;
    }
    
    .rays{
        width:308px;
        height:132px;
        position:absolute;
        left:0px;
        top:0px;
        z-index:4;
        opacity:0;
        background-image:url('rays.png');
        -webkit-transform-origin:right top 0;
        -webkit-transform:rotate(15deg);
        transform-origin:right top 0;
        transform:rotate(15deg);
        -webkit-animation-name:sunrise;
        -webkit-animation-duration:1s;
        -webkit-animation-delay:4s;
        -webkit-animation-direction:normal;
        -webkit-animation-iteration-count:1;
        -webkit-animation-timing-function:ease-in-out;
        -webkit-animation-fill-mode:forwards;
        animation-name:sunrise;
        animation-duration:1s;
        animation-delay:4s;
        animation-direction:normal;
        animation-iteration-count:1;
        animation-timing-function:ease-in-out;
        animation-fill-mode:forwards;
    }
    
    
    
    @-webkit-keyframes showtrunk{
        0%{clip:rect(54px,37px,54px,0px);}
        100%{clip:rect(0px,37px,54px,0px);}
    }
    
    @-webkit-keyframes showbranches{
        0%{-webkit-transform:scale(0,0);opacity:0;}
        100%{-webkit-transform:scale(1,1);opacity:1;}
    }
    
    @-webkit-keyframes sunrise{
        0%{-webkit-transform:rotate(15deg);opacity:0;}
        100%{-webkit-transform:rotate(0deg);opacity:1;}
    }
    
    @keyframes showtrunk{
        0%{clip: rect(54px,37px,54px,0px);}
        100%{clip: rect(0px,37px,54px,0px);}
    }
    
    @keyframes showbranches{
        0%{transform:scale(0,0);opacity:0;}
        100%{transform:scale(1,1);opacity:1;}
    }
    
    @keyframes sunrise{
        0%{transform:rotate(15deg);opacity:0;}
        100%{transform:rotate(0deg);opacity:1;}
    }
    

    Put the HTML and CSS file on the same folder where you have downloaded the images. Render the HTML file and see how the animation goes on.

    Thanks for viewing

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: