Home » CSS 3 » Object rotating clockwise with CSS3 Animations

Object rotating clockwise with CSS3 Animations

Rotate Image Clockwise css3 animation

Can we create ‘Object rotating clockwise with CSS3 Animations’? Here is another example for CSS 3 animations and css3 transitions. I am going to give an example of CSS 3 animations using an arrow and a circle; Object rotating clockwise with CSS3 Animations.

In this example for Object rotating clockwise with CSS3 Animations, I use @keyframe – it involves the description of specific moments of animation with the @keyframe rule. This allows you to have repeating animations that do not depend on user actions or JavaScript to get triggered.

HTML for Object rotating clockwise with CSS3 Animations

    <div class="container-round">
        <div class="round"></div>
       <div class="arrow"></div>
    </div>

Here is a container which holds the circle and the arrow which will be rotating.

CSS for Object rotating clockwise with CSS3 Animations

Object rotating clockwise with CSS3 Animations

   .container-round {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	position:relative;
	overflow:hidden;
}

.round {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(round.png) no-repeat center center;
}

.arrow{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: url(arrow.png) no-repeat 50px center;
	-webkit-animation:orbit 2s linear infinite;
	animation:orbit 2s linear infinite;
	transition:background-position 0.8s;
}

/* Here I am defining the keyframes of the animation */

@-webkit-keyframes orbit {
	from {
		-webkit-transform:rotate(0deg);}
	to {
		-webkit-transform:rotate(360deg);
	}
}

@keyframes orbit {
	from {
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);}
	to {
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
	}
}

Give a name for the animation. Here I am using the name ‘orbit’ for the animation. And adding key frames for animation ‘orbit’.

Demo for Object rotating clockwise with CSS3 Animations

Rotate Image Animation with CSS3 Demo

One thought on “Object rotating clockwise with CSS3 Animations

  1. Rajesh says:

    Thanks for sharing this.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*