An element change his position from one style to another style is called CSS animations Tricks.

By using css3 animation examples we can create animated images.Now a days css3 animation examples make more elegant design and attract people attention to your site.


You May Also Like:


You can animate you images in place of flash animation or JavaScript. You can easily create these animations without knowledge of JavaScript. Before apply animation on your images two important component are focused.

  • A style describe the CSS animations
  • Set of keyframes that indicates start and end states of animation

Bind the css animations to a selector (element) by specifying at least these two properties:

  •  the name of the animation
  •  the duration of the animation

Example

Bind the “myfirst” css animations to the div element. css Animation duration: 5 seconds:

 

 div
{
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

/* Standard syntax */
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

You can specify change in percentages like you can use the keywords “from” and “to” (which represents 0% and 100%).

 
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

/* Standard syntax */
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
} 

One More Example. In this example change the color and position…

 
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

More Animation Example

 div
{
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}

About The Author

Related Posts

One Response

Leave a Reply

Your email address will not be published.