Anime.txt

<!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">
    <link rel="stylesheet" href="css/anime.css">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <!-- <div class="square"></div> -->
</body>
</html>
 
<!--Some Changes that is happening based on some event,for example u have a square and u want to change the colour
when u hover it or active and transition should happen gradually-->
<!-- If the colour or some changes is happening without any action or hover then that is animation-->
[11:01 AM] Maria (Unverified)
llll
[11:01 AM] Maria (Unverified)
.square{
    width:300px;
    height:300px;
    background-color: aquamarine;
    /* transition-duration: 3s;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(1,-0.35, 1, 1.21);
    transition-delay:1s; */
    /* transition:background-color 3s 1s linear; */
}
 
.square:hover{
    /* background-color: blueviolet;
    width:600px; */
    transform:translateY(-50px);
}
 
.box{
    width:100px;
    height:100px;
    border-radius: 50%;
    position:relative;
    background-color:lightcoral;
    animation-name:circle;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-iteration-count: 10;
}
 
@keyframes circle {
    0%{
        background-color:darkmagenta;
        left:0px;
        top:0px;
    }
    100%{
        background-color: cornflowerblue;
        width:300px;
        height:300px;
        left:600px;
        top:600px;
    }
}