body{
    background-color: blue;
}
#box{
    width: 250px;
    height: 250px;
    background-color: red;
    font-size: 13em;
    text-align: center;
    animation-name: slideLeft;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-play-state: paused;
    animation-timing-function: ease-in-out;
    /* opacity: 0; */
}
img{
    width: 250px;
    height: 250px;
    background-color: red;
    font-size: 13em;
    text-align: center;
    animation-name: slideLeft;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    /* animation-play-state: paused; */
    animation-timing-function: ease-in-out;
}
#box:hover{
    animation-name: glow;
    animation-duration: 2s;
}
@keyframes slideLeft{
    from{
        transform: translateX(100%);
    }
}
@keyframes slideRight{
    to{
        transform: translateX(100%);
    }
}
@keyframes slideUp{
    from{
        transform: translateY(100%);
    }
}
@keyframes slideDown{
    to{
        transform: translateY(100%);
    }
}
@keyframes rotate{
    50%{
        transform: rotateZ(360deg);
    }
}
@keyframes grow{
    50%{
        transform: scale(2,2);
    }
}
@keyframes shrink{
    50%{
        transform: scale(0.5,0.5);
    }
}
@keyframes fade{
    50%{
        opacity: 1;
    }
}
@keyframes colour_change{
    0%{background-color: red;}
    20%{background-color: orange;}
    40%{background-color: yellow;}
    60%{background-color: green;}
    80%{background-color: blue;}
    100%{background-color: blueviolet;}
}
@keyframes glow{
    50%{
        box-shadow: 0px 0px 50px yellow ;
    }
}

