CSS3 Animation | Coding Tag
×

CSS3 Animation

0 1573

CSS3 Animation is very interesting, you can easily change properties as per need for animation. Main Benefit, for animation you don't need to use flash, you can simply do it through CSS3 Animation.

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

-zoom animation

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@keyframes zoom {
5% {
transform: scale(0.1);
opacity: 0;
}
100% {
transform: scale(1.0);
opacity: 1;
}

}
.zoom {
animation-duration: 2.5s;
animation-name: zoom;
width:300px;
}
</style>
</head>

<body>
<div class="zoom">
Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa
</div>
</body>

</html>


Share:


Discount Coupons



Leave a Reply


Comments
    Waiting for your comments