How to css iteration

Posted under CSS3 Course On By mohammed.mutawe

CSS iteration

We talked about CSS keyframes, and we tried an example and understood how the CSS language works with moving html tags. In the previous lesson, we mentioned the animation function in general, as it contained the animation and the number of seconds needed for that animation as follows:

animation: moving 10s ;

But sometimes we need to abstract while using the animation function, for example, we want to allocate the animation to a specific html tag, or for example, we want to specify the number of seconds in a different line , we want also to specify count number to stop looping our HTML tag, and this is what we will talk about in this lesson.

 

Definition

When we reach the number of times the movement is executed, we use this function:

animation-iteration-count:infinite;

And to make the number of movement limited, we give any integer value as follows:

animation-iteration-count:5;

Here we have set a limited number of animations which is only 5 cycles and this is what distinguishes the access to animation functions in CSS as this makes it easier to understand our code.

 

 

Benefits

There are many benefits to using the tachometer separately, including:

  • Reducing and regulating movement numbers if we have more than one tag.
  • Reducing memory resources and browser cache consuming which maintains the speed of our web page.

 

Example

Please, to understand CSS iteration well, copy the following codes and run it in your browser.

CSS

.first{
    width: 100px;
    height: 100px;

    background-color:#F00;
    margin:20px auto;
    margin-top:300px;
    position:absolute;


    animation-name: moving; /*This is type of keyframe*/
    animation-duration: 3s;

    /*Iteration*/
    animation-iteration-count:infinite; /*Number of iteration-count*/

}


/*Animation functions*/
@keyframes moving{
    0% , 100% {
        top:200px;
        left:200px;
    }

    25%{
        top:200px;
        left:100px;
    }

    50%{
        top:200px;
        left:100px;
    }

    75%{
        top:200px;
        left:100px;
    }

}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Iteration </title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class="first">This is first</div>
    </body>

</html>