CSS3 Animation | Coding Tag
×

CSS3 Animation

0 2589

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>



Best WordPress Hosting


Share:


Discount Coupons



Leave a Reply


Comments
    Waiting for your comments