CSS3 Animation Rotate
0 3258
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>
Share:
Comments
Waiting for your comments