CSS3 Animation Rotate

0 3306

CSS3 Animation is very interesting, you can easily change properties as per need for animation. Now you can rotate animation through below code.

Properties- Animation Duration, Animation Delay, Animation Iteration Count, Width, Padding and more. Now copy below code and paste into your web page and modify it as per your requirement.

Support- Google Chrome, Mozilla, Opera, IE, Safari.

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@keyframes rotation {
0% {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
opacity: 1;
}
}
.rotation {
animation-duration: 2.5s;
animation-delay:1.5;
animation-name: rotation;
animation-iteration-count:5;
width:300px;
border:1px solid #ddd;
padding:10px;
}
</style>
</head>

<body>
<div class="rotation">
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>