CSS3 Animation

0 3296

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>