MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with CSS3 animation tools

In this article, we will learn about the basic animation tools that are used in CSS3.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Let us start with little basics of CSS3 animations. As we all know, animation is a new CSS property that allows for animation of most HTML elements (such as div, h1 and span) without JavaScript or Flash. Users can change as many styles as they want and as many times they want to. The only thing that needs to be done is to specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%. In simple terms, 0% is the beginning of the animation, 100% is when the animation is complete.

The key to create animations in CSS3 is @keyframes rule. In this rule, the animation is created. So, the user needs to specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Note: For the attention of the users, @keyframes rule or the animation property is not supported by Internet Explorer.

In order to use this property in other web browsers, we need to add a prefix. Firefox requires the prefix -moz-, Chrome and Safari require the prefix -webkit-, and Opera require the prefix -o-.

Listing 1: Shows the code to add the prefix in different web browsers

@keyframes learningCSS3animation
{
from {background: blue;}
to {background: grey;}
}

@-moz-keyframes learningCSS3animation /* Firefox */
{
from {background: blue;}
to {background: grey;}
}

@-webkit-keyframes learningCSS3animation /* Safari and Chrome */
{
from {background: blue;}
to {background: grey;}
}

@-o-keyframes learningCSS3animation /* Opera */
{
from {background: blue;}
to {background: grey;}
}

Now, when the animation is created by the user using the @keyframes rule, the created animations must be bind to selector. If the animation is not bind, then it will not show any effect i.e., the animation. In the process of binding the animation, user needs to define two different CSS animation properties. These properties can be anything, but in this article, we will be defining the two most important properties i.e., the name of the animation and the duration of the animation.

Note: The duration of the animation must be set by the user because if the user does not provide the duration, then the animation will not run, because the default value will be zero in that case.

Now, let us create a very simple animation. In this, we are binding “learningCSS3animation” element to a div element and then providing the duration for the animation.

Listing 2: Shows the code to bind the element to the animation and to provide the duration of the animation

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:1000px;
height:500px;
background:blue;
animation:learningCSS3animation 10s;
-moz-animation:learningCSS3animation 10s; /* Firefox */
-webkit-animation:learningCSS3animation 10s; /* Safari and Chrome */
-o-animation:learningCSS3animation 10s; /* Opera */
}

@keyframes learningCSS3animation
{
from {background:blue;}
to {background:grey;}
}

@-moz-keyframes learningCSS3animation /* Firefox */
{
from {background:blue;}
to {background:grey;}
}

@-webkit-keyframes learningCSS3animation /* Safari and Chrome */
{
from {background:blue;}
to {background:grey;}
}

@-o-keyframes learningCSS3animation /* Opera */
{
from {background:blue;}
to {background:grey;}
}
</style>
</head>
<body>

<p><b>Note:</b> Sorry, as mentioned this example will not run in Internet Explorer.</p>

<div></div>

</body>
</html>
Shows the output of Listing 2

Figure 1: Shows the output of Listing 2

Now, we can also change different colors when the animation is running. For example, the animation will change color after regular intervals of time i.e., at 25% of the given time, 50% of the given time and 75% of given time and finally at 100% of given time.

Listing 3: Shows the code to perform the above mentioned task

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:200px;
height:100px;
background:blue;
animation:learningCSS3animation 20s;
-moz-animation:learningCSS3animation 20s; /* Firefox */
-webkit-animation:learningCSS3animation 20s; /* Safari and Chrome */
-o-animation:learningCSS3animation 20s; /* Opera */
}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}

@-moz-keyframes learningCSS3animation /* Firefox */
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}

@-webkit-keyframes learningCSS3animation /* Safari and Chrome */
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}

@-o-keyframes learningCSS3animation /* Opera */
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}
</style>
</head>
<body>

<p><b>Note - 1:</b> Sorry, as mentioned above this example will not run in Internet Explorer.</p>
<p><b>Note - 2:</b> When the animation is finished, it changes back to its original style i.e., the color at 0 time.</p>

<div></div>

</body>
</html>
Shows the output of Listing 3

Figure 2: Shows the output of Listing 3

Now, we can also make the animation move on different locations at different times.

Listing 4: Shows the code to move the animation

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:150px;
height:100px;
background:blue;
position:relative;
animation:learningCSS3animation 25s;
-moz-animation:learningCSS3animation 25s; /* Firefox */
-webkit-animation:learningCSS3animation 25s; /* Safari and Chrome */
-o-animation:learningCSS3animation 25s; /* Opera */
}

@keyframes learningCSS3animation
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}

@-moz-keyframes learningCSS3animation /* Firefox */
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}

@-webkit-keyframes learningCSS3animation /* Safari and Chrome */
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}

@-o-keyframes learningCSS3animation /* Opera */
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note - 1:</b> Sorry, as mentioned above this example will not run in Internet Explorer.</p>
<p><b>Note - 2:</b> The animation will remain at the position of time 100% in the end.</p>

<div></div>

</body>
</html>
Shows the output of listing 4

Figure 3: Shows the output of listing 4

Now, we can also set the properties for infinite time and the animation keep on running.

Listing 5: Shows the code to make the animation run for infinite time

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:150px;
height:100px;
background:blue;
position:relative;
animation-name:learningCSS3animation;
animation-duration:20s;
animation-timing-function:linear;
animation-delay:5s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:learningCSS3animation;
-moz-animation-duration:20s;
-moz-animation-timing-function:linear;
-moz-animation-delay:5s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:learningCSS3animation;
-webkit-animation-duration:20s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:learningCSS3animation;
-o-animation-duration:20s;
-o-animation-timing-function:linear;
-o-animation-delay:5s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}

@keyframes learningCSS3animation
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}

@-moz-keyframes learningCSS3animation /* Firefox */
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}

@-webkit-keyframes learningCSS3animation /* Safari and Chrome */
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}

@-o-keyframes learningCSS3animation /* Opera */
{
0%   {background:blue; left:0px; top:0px;}
25%  {background:black; left:250px; top:0px;}
50%  {background:purple; left:250px; top:250px;}
75%  {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example will keep on running because the time set is infinite.</p>

<div></div>

</body>
</html>

The output of listing 5 will keep on running because we have defined the duration and the relative position of movements of the animation.

This is all for today’s article. See you next time!



I have done my bachelor in Computer Science and I am well versed with programming languages such as JAVA, C#, html and done courses on Android development.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login