Monday, 25 April 2022

HTML + CSS #22 | Animation in CSS | Animation Name , Duration , Count | HTML & CSS | Web Development

 <!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>Document</title>
</head>
<style>
    body {
        background-color: black;
    }

    .box {
        background-color: gold;
        animation-name: Sahitya;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        width: 100px;
        position: relative;
       
    }
    @keyframes Sahitya {
     0%{
        top: 100px;
        left: 0px;
     }
     50%{
        left: 70px;
        top:100px
     }
     75%{
         top: 0px;
         left:70px;
     }
     100%{
top: 0px;
left: 0px;
     }
    }
</style>

<body>
    <div class="pbox">
        <p class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, necessitatibus iure iusto
           
        </p>
    </div>
</body>

</html>







No comments:

Post a Comment

JAVASCRIPT + CSS + HTML #42 | Event & Event Listener |How to Target using JS | Web Development

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...