Skip to main content

Amazed Animation Properties in CSS3

 Amazed Animation Properties in CSS3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation box</title>
    <style>
        .container{
            width: 100%;
            height: auto;
       
        }
        .para{
           
            height: auto;
        }
        body{
            background: black;
            color: white;
        }
        .para{
            width:50px;
            height:50px;
            padding: 15px;
            margin-left: 10px;
            border-radius: 100px;
            transform: translateX(40%) ;
            animation: loading 4s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        @keyframes loading {
            from{
                transform: translateX(-48px) ;
            }
            50%{
                left: 80%;
            }
            to{
                transform: translateX(200px) ;
            }
           
        }
        .para2{
            width:50px;
            padding: 15px;
            margin-left: 10px;
            border-radius: 100px;
            transform: translateX(40%);
            animation: second 4s infinite linear;
        }
        @keyframes second {
            from{
                transform: translateX(-48px);

            }
            to{
                transform: translateX(200px);
            }
           
        }
      .para3{
        width:50px;
            padding: 15px;
            margin-left: 10px;
            border-radius: 100px;
            transform: translateX(40%);
            animation: third 4s infinite ease;
        }
   
        @keyframes third {
            from{
                transform: translateX(-48px);

            }
            to{
                transform: translateX(200px);
            }
           
        }
        .para4{
            width:50px;
            padding: 15px;
            margin-left: 10px;
            border-radius: 100px;
            transform: translateX(40%);
            animation: third 4s infinite ease-in;
        }
   
        @keyframes fourth {
            from{
                transform: translateX(-48px);

            }
            to{
                transform: translateX(200px);
            }
           
        }
        .para5{
            width:50px;
            padding: 15px;
            margin-left: 10px;
            border-radius: 100px;
            transform: translateX(40%);
            animation: five 4s infinite ease;
        }
        @keyframes five {
            from{
                transform: translateX(-48px);

            }
            to{
                transform: translateX(200px);
            }
           
        }
        .para6{
            width:50px;
            padding: 15px;
            margin-left: 10px;
           
            border-radius: 100px;
            transform: translateX(40%);
            animation: six 4s infinite steps(15);
        }
        @keyframes six {
            from{
                transform: translateX(-48px);

            }
            to{
                transform: translateX(200px);
            }
           
        }
    </style>
</head>
<body>
    <div class="container">
        <h5>cubic-bezier</h5>
      <img  class="para"src="blink.png" alt="">
   
   
   
        <h5>Linear</h5>
        <img  class="para2"src="blink.png" alt="">
     
     
        <h5>Ease</h5>
        <img  class="para3"src="blink.png" alt="">
     
     
        <h5>Ease-in</h5>
        <img  class="para4"src="blink.png" alt="">
     
     
        <h5>Ease-in-out</h5>
        <img  class="para5"src="blink.png" alt="">
     
      <div >
        <h5>Step</h5>
        <img  class="para6"src="blink.png" alt="">
        </div>
     
</body>
</html>
/////==========output=====//////

Comments

Post a Comment

Popular posts from this blog

What is Web-Development ?

i) Web development refers to the creating, building, and maintaining of websites.  ii) It includes aspects such as web design, web publishing, web programming, and database management. iii)  It is the creation of an application that works over the internet for e.g websites. The word Web Development is made up of two words, that is: Web:  It refers to websites, web pages or anything that works over the internet. Development:  It refers to building the application from scratch.
Post a Comment
Read more

How To Make Clone NETFLIX Webpage

 How To Make Clone NETFLIX Webpage...... With the Help of HTML CSS and JAVASCRIPT... <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Netflix Clone </ title >     < script src = "https://kit.fontawesome.com/a02bd9801f.js" crossorigin = "anonymous" ></ script > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" >         < style >         body {             display : flex ;             justify-content : center ;             align-items : center ;         ...
Post a Comment
Read more

Use of Switch Case in JAVASCRIPT:

 How to check week day from  week number  ? <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Check week day </ title > </ head > < body >     < script >     var a = prompt ( "enter Week Number" );   switch ( a ){     case '1' :         document . write ( "Monday" );         break ;           case '2' :         document . write ( "Tuesday" );         break ;         case '3' :         document . write ( "Wednesday" );         break ;         case '4' : ...
Post a Comment
Read more