Css3 Infinite animation (Forever Loop Animation)

Hello.. No I will try share a tutorial how to create infinite animation using css3. Ok now example code from me.

<!DOCTYPE html>
<html>
	<head>
		<style> 
		div {
			width:100px;
			height:100px;
			background:red;
			position:relative;
			animation:mymove 5s infinite;
			-webkit-animation:mymove 5s infinite;
			-moz-animation:mymove 5s infinite;
			-o-animation:mymove 5s infinite;
			animation: mymove 5s infinite;
		}

		@keyframes mymove {
			from {top:0px;}
			to {top:200px;}
		}

		@-webkit-keyframes mymove {
			from {top:0px;}
			to {top:200px;}
		}
		
		@-moz-keyframes mymove {
			from {top:0px;}
			to {top:200px;}
		}
		
		@-o-keyframes mymove {
			from {top:0px;}
			to {top:200px;}
		}
</style>
</head>
<body>
	<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>
	<div></div>
</body>
</html>


Note:

  1. Choose a selector to assign value, example line 40
  2. Create css3 keyframes rule to make infinite animation, example line 17 – 35
  3. And then send action (trigger) div selector with css value and call keyframes rule, example line 10 – 14

And if you have question how to create rule more than 2 value? Example from the above, we create rule from and to. For the answer, look this code:

<!DOCTYPE html>
<html>
    <head>
        <title>First Code</title>
		<style type="text/css">
			@-webkit-keyframes myfirst {
				0%   {background: #0099FF;}
				25%  {background: #99FF99;}
				50%  {background: #FFFF66;}
				100% {background: #FFFFFF;}
			}

			@-moz-keyframes myfirst {
				0%   {background: #0099FF;}
				25%  {background: #99FF99;}
				50%  {background: #FFFF66;}
				100% {background: #FFFFFF;}
			}

			@-o-keyframes myfirst {
				0%   {background: #0099FF;}
				25%  {background: #99FF99;}
				50%  {background: #FFFF66;}
				100% {background: #FFFFFF;}
			}

			@keyframes myfirst {
				0%   {background: #0099FF;}
				25%  {background: #99FF99;}
				50%  {background: #FFFF66;}
				100% {background: #FFFFFF;}
			}

			body {
				-webkit-animation:myfirst 35s infinite;
				-moz-animation:myfirst 35s infinite;
				-o-animation:myfirst 35s infinite;
				animation:myfirst 35s infinite;
			  }
		</style>
    </head>
    <body>
		<p style="text-align: center">Hello World!!</p>
    </body>
</html>

Note:
From the above code, we use percentage (0% – 100%) and not use from and to

For the result, you can open this site http://jsfiddle.net/imron02/5VxGY/
Source: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

5 comments

  1. Excellent post. I was checking constantly this blog and I am impressed!
    Very useful info specifically the last part ­čÖé I care for such info much.
    I was seeking this certain information for a very long time.
    Thank you and good luck.

  2. Have you ever considered about adding a little bit more than just your articles?
    I mean, what you say is valuable and everything.

    Nevertheless think about if you added some great graphics or video clips
    to give your posts more, “pop”! Your content is excellent but with images and clips, this site could
    undeniably be one of the very best in its field.
    Fantastic blog!

  3. I love your blog.. very nice colors & theme. Did you create this website yourself or did you
    hire someone to do it for you? Plz respond as I’m looking to create my own blog and would like to know where u
    got this from. thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s