animations

we can add animation to the website like

.box{

        animation-name: xyz;

        animation-duration: 2s;

        animation-iteration-count: 2;

these were the main values other than that we have

/* animation-fill-mode: alternate; */
        /* animation-timing-function: ease-in-out; */
        /* animation-delay: 3s; */
        /* animation-direction: reverse;  */

        

the short hand way of writing animation in one line is

 /* animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-fill-mode; */

ie. animation: name; duration; timing function; delay; iteration count; fill mode

animation: harry 5s ease-in 1s 12 backwards;

}

the different ways of calling an animation are using keyframe

 @keyframes harry2 {
        0%{
            top:0px;
            left:0px;
        }
        25%{
            top: 250px;
            left: 0px;
        }
        75%{
            top: 250px;
            left: 250px;
        }
        100%{
            top: 0px;
            left: 250px;
        }
        
    }
    @keyframes harry1 {
        from {
            width: 200px;
        }

        to {
            width: 1400px;
        }
    }