How can I use keyframes in css

Posted under CSS3 Course On By mohammed.mutawe

keyframes in css

CSS language gives us a simple and more wonderful handling of keyframes, and the frame is the amount of time needed to move the graphics on the screen maintaining the same efficiency, in this lesson we will move the HTML tag through CSS.

 

 

Definition

Where the process of controlling the frames through:

div
{
  animation: moving 10s ;
}

@keyframes moving{

    0% {
          /*your code here*/
         }
    100% {
        /*your code here*/
    }
}

This is done by accessing the moving feature in the animation function, followed by the number of seconds or fractions of seconds in which we want the display to continue, in addition to the stages of changing the tag, which is modified in @keyframes moving, where the percentage crosses the begin and end of the stages from 0% to %100.

 

Benefits

It has many benefits that can be summarized in:

  • Beautiful and wonderful coordination during the page recall, which confirms the return of visitors to us again.
  • It works perfectly with the JavaScript language.
  • Ability to use in thumbnails such : loading icon , countdown , etc..

 

Example

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

CSS

div{
    width: 100px;
    height: 100px;
    color:#FFFFFF;
    text-align:center;
    background-color:#D9D9D9;


    position:absolute;



    animation: moving 10s ;
}


/*Animation functions*/
@keyframes moving{
    0% {
        top:0;
        left:0;
        background-color:#D9D9D9;
    }

    25%{
        top:0;
        left:1000px;
        background-color:#893E3E;
    }

    50%{
        top:200px;
        left:100px;
        background-color:#8CA7B6;
    }

    75%{
        top:200px;
        right:100px;
        background-color:#2C5B76;
    }

    100%{
        top:150px;
        right:75px;
        background-color:#70F3F8;
    }
}

 

HTML

<!DOCTYPE html>

<html lang="en">

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

    <body>
        <div>
            Welcome to CSS keyframe
        </div>
    </body>

</html>