CSS animation.

-

CSS animation

An animation is an element which changes its one style gradually to another style. You can change CSS property according to requirement. To use CSS animation, you must first specify some keyframes for the animation.
The animation will gradually change from the style to the new style at certain times to get an animation you must bind the animation to an element.
CSS animation properties:
  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                width: 150px;
                height: 150px;
                animation-name:developeranke;
                animation-duration: 3s;
                background-color: aqua;
                border-radius: 10px;
               
            }
            @keyframes developeranke
            {
                from{background-color: pink;}
                to{background-color: blue;}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>











The animation-duration property defines how long time an animation should take to complete.
In the above example animation-duration is not define so its starts at 0% and end on 100%.
It also possible to use animation duration using percent you can set CSS property according to requirement at specified percent value.
In the following examples background colour of a div box will be change when animation is 25% complete, 50%complete and again when the animation is 100% complete.

<html>
    <head>
        <style>
            div
            {
                width: 150px;
                height: 150px;
                animation-name:developeranke;
                animation-duration: 10s;
                background-color: aqua;
                border-radius: 10px;
               
            }
            @keyframes developeranke
            {
                0%{background-color: red;}
                25%{background-color: pink;}
                50%{background-color: blue;}
                100%{background-color: greenyellow;}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>







<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                width: 150px;
                height: 150px;
                animation-name:developeranke;
                animation-duration: 10s;
                background-color: aqua;
                border-radius: 10px;
                position: relative;
               
            }
            @keyframes developeranke
            {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:250px; top:0px;}
  50%  {background-color:blue; left:250px; top:250px;}
  75%  {background-color:green; left:0px; top:250px;}
  100% {background-color:red; left:0px; top:0px;}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>









Delay an animation

Animation-delay property specifies a deley for the start of animation it means how many time to taken by animation to start.

  div
            {
                width: 150px;
                height: 150px;
                animation-name:developeranke;
                animation-duration: 10s;
                background-color: aqua;
                border-radius: 10px;
                animation-delay:3s;
               
            }


Negative values are also allowed, if using negative values the animation will be start as if animation had already been playing for N second;
In the following example if a animation duration is 4 sec and animation delay is -2 second then animation will be start when 2 second animation will be completed.
  div
            {
                width: 150px;
                height: 150px;
                animation-name:developeranke;
                animation-duration: 4s;
                background-color: aqua;
                border-radius: 10px;
                animation-delay:-2s;
               
            }

Set an animation how many times should be run

The animation-iteration-count property specifies the number of times an animation will be play.

  div
            {
                width: 150px;
                height: 150px;
                animation-name:developeranke;
                animation-duration: 4s;
                background-color: aqua;
                border-radius: 10px;
               animation-iteration-count: 3;
               
            }

Note: animation-iteration-count takes infinite value to play animation infinite times.









thanku...............................

Comments

Post a Comment

Popular posts from this blog

python pattern programming

-
Image
PYTHON PATTERN PROGRAMMING Python nested loop: Python allow programmer to use nested loops.Nested loop means when one loop is define into another loop is known as nested loop,in which one is called inner loop and another is called outer loop.In which when outer loop's condition is true than inner loop will be execute. we use the concept of nested loop in pattern programming etc. syntax: while (condition):      while (condition):         statement x     statement y   Some examples of nested loop. Nested loop program. Q. write  a program to print following pattern. P P Y P Y T P Y T H P Y T H O P Y T H O N str = "PYTHON" for  i  in   range ( 0 , 6 ):      print ()      for  j  in   range ( 0 ,i+ 1 ):          print (str[j],  end = ' ' ) Q. write  a program to print following pattern. *  * *  * * *  * * * *  * * * * * for  i  in   range ( 1 , 6 ):          print ()          for
Read more

Decision making statement in python

-
Image
Decision making statement in python In this statement we can take a decision for executing block of statement.if in this case condition is checked.if condition is true then the true part will execute,otherwise false part will execute.        There are four types of decision making statement. (1) simple if statement/single alternative if statement. (2) if-else statement/double alternative if statement. (3) if-else-if statement/else if ladder statement. (4) Nested if statement/compound if statement. (1)simple if statement/single alternative if statement  In this statement if condition is true then true part will execute otherwise no action will generate.  Syntax: if  test expression:     Statement 1     Statement 2     Statement 3    ---------------    ---------------     Statement n Statement x Examples: if  ( age>=18) :    print( "You are eligible for vote" ) (2) if-else statement/double alternative if statement In this statement if co
Read more

javaScript Calculator.

-
Image
javaScript Calculator. calculator using HTML,CSS and javaScrip t. Html code- <html>     <head>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <link rel="stylesheet" type="text/css" href="style_calculater.css">         <script src="script_src.js">     </head>     <body>     <div class="container">         <div class="dbox"><input type="text" id="display" placeholder="0"><br>         <input type="text" id="display2" placeholder="0">         <div id="box">             <button class="key" value="7" onclick="dis('7')" > 7 </button>              <button class="key" value="8" onclic
Read more