Simple CSS3 Animation Example

over 10 years ago

0
0
Positive Vote
0
Negative Vote
0
Save Favourite
0
0
0
0
536

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.
For this I will be using following images.

bg.jpg

treetrunk.png

branches.png

rays.png

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

Simple CSS3 Animation Example

0 Comment(s)

Comment on it

Unable to start Java!! Mr. Nerd figure out why..

Positive Votes

Negative Votes

Delete Comment

Post Projects

Manage Company