*{
    box-sizing: border-box;
}
body{
margin: 0;
}
.square{
    background-color: pink;
    width: 200px;
    height:200px;
    /* animation-name: test;
    animation-duration: 4s; (always write first)
    animation-iteration-count: 1;
    animation-delay: 2s;(second)
    animation-timing-function:ease-in-out;
    animation-direction: alternate;
    animation-fill-mode: both; */
    animation: test 4s 2s infinite ease-in-out alternate both ;
    display: none;
}

@keyframes test {
    0%{
        background-color: mediumorchid;

    }
    50%{
        background-color: aquamarine;
    }
    100%{
        background-color: hotpink;
    }
}
.container{
    background-color: lightyellow;
    height:100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    overflow: hidden;

    animation: blink 4s infinite alternate;
}
@keyframes blink{
    0%{
        scale: 1 1;
        rotate: 0;
    }
    100%{
        scale: .5 0;
        rotate: 360deg;
    }
}
.circle{
    background-color: violet;
    width:100px;
    height:100px;
    border-radius:100%;
    animation:pulse 2s infinite alternate ease-in-out; 
}

@keyframes pulse{
0%{
    background-color:rgb(255, 174, 248);
    scale: 1;
}
100%{
background-color: rgb(232, 153, 252);
scale: 1.4;
}
}

.box{
    background-color: aquamarine;
    width: 100px;
    height:100px;
    animation: spin 4s infinite linear;
}
@keyframes spin{
    0%{
        rotate:0deg ;
    }
    100%{
        rotate: 360deg;
    }
}
.mover{
    background-color:hotpink;
    width:150px;
    height:50px;
    position:absolute;
    bottom:0;
    left:0;
    animation: move 4s infinite linear;
}
@keyframes move{
    0%{
left: -150px;
    }
    100%{
left: 100%;
    }
}
.changer{
    background-color: lightpink;
    width:100px;
    height:100px;
    /* we dont want to apply our transitions to the hover states*/
    transition: background 2s, 
                border-radius 2s, 
                rotate 2s;
}
.changer:hover{
    background-color:rgb(255, 0, 230);
    border-radius: 100%;
    rotate:360deg;
}