CSS3 animation: Put some animation effects on element.

CSS3 animation is a great way to put some animation effects to the specified element.

@keyframes

@keyframes helps to divide animation in frames. Without keyframe animation wont work. You can specify initial and final property by using percentage or using keywords like “from”, “to”. You will get example at the end of the article.

Syntax:

@keyframe value_of_animation_name_property{
from{}
to{}
}

Animation properties.

There are following animation properties.

  • Animation-name.
  • Animation-duration.
  • Animation-timing-function.
  • Animation-delay.
  • Animation-iteration-count.
  • Animation-direction.
  • Animation-play-state.

See this example.

Animation-name.

Animation name property allows to specify the name to the animation which helps to create unique identity of specified animation effect. Animation-name will be used in the syntax of @keyframes.

Example. animation-name : sushrut;

Animation-duration.

Animation-duration represents the duration of the animation. It value is generally written in seconds or milliseconds.

Example. animation-duration: 3s;

Animation-timing-function.

Sometimes animation varies speed from between its stars to end. To control its speed Animation-timing-function is used.

Example: animation-timing-function: ease-in;

Animation-timing-function values.

  • Linear:  Maintains same speed thoughout animation
  • Ease: Start with fast speed and ends with slow speed.
  • Ease-in: Start with slow speed and ends with fast speed.
  • Ease-out: Looks same as Ease.
  • Ease-in-out: Start with slow, increases speed at middle and ends with slow speed.

More information and example.

Animation-delay.

Animation-delay represents the speed of the animation. It value is generally written in seconds or milliseconds. More seconds means more delay.

Example. animation-delay: 3s;

Animation-iteration-count.

Animation-iteration-count represents the frequency of the animation.

Example. animation-iteration-count: 5;

Animation-direction.

Animation-direction defines normal and reverse direction.

Example: Animation direction: alternate;

Animation direction values.

normal: Animation will work normally. Animation will start from starting frame and ends with ending frame. Again start with starting frame and so on.

reverse:  Animation will be reverse. Animation will start from ending frame and ends with starting frame. Again start with ending frame and so on.

alternate: Animation will start from starting frame and ends with ending frame. Then start with ending frame and ends with starting frame and so on

alternate-reverse:  Animation will start from ending frame and ends with starting frame. Then start with starting frame and ends with ending frame and so on.

Live example 

Animation-play-state.

Animation-play-state values helps to decide whether the animation should keep running or pause. Default value is running.

Example: animation-play-state: paused;

Live example

Animation compatibility extension according to browser.

If you have read the following example, you will see that, I have added same code twice and added webkit extension in one of them. Why I have done that? Because I want, animation should work for all browsers. If I run the code without using webkit, then animation will not work on Google Chrome, Opera and Safari. Animation will work on Mozilla Firefox.

CSS3 animation example.

<html>
<head>
<style>
div#animation {
width: 200px;
height: 100px;
background: red;
position: relative;
-webkit-animation: sushrut 5s infinite; /* Chrome, Safari, Opera */
animation: sushrut 5s infinite;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes sushrut {
from {background: red; left:0px;top:0px; }
to {background: black;left:400px;top:0px; color: white;}
}

/* Standard syntax */
@keyframes sushrut {
from {background: red; left:0px;top:0px; }
to {background: black;left:400px;top:0px; color: white;}
}
</style>
</head>

<body>

<div id=”animation”><strong>thanks for showing interest for learning CSS3 animation from our website.</strong></div>

</body>
</html>

thanks for showing interest for learning CSS3 animation from our website.

Comments

comments