CSS3 Animation

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>



Leave a Reply

avatar
  Subscribe  
Notify of