.canva1 {
    border-style: dashed;
    border-color: #111;
    border-width: 2px;
    width: 250px;
    height: 300px;
    margin: auto;
    padding: auto;
}

.animation1 {
    height: 150px;
    width: 150px;
    background-color:#f00;
    padding-top: 20px;
    text-align: center;
    font-size: large;
    /* название анимации */
    animation-name: moveSquare; 
    /* продолжительность анимации */
    animation-duration: 3s;
    /* характер движнния равномерный */
    animation-timing-function: linear;
    /* запускает анимацию в конце в обратную сторону */
    animation-direction: alternate;
    /* повторение анимации */
    animation-iteration-count: infinite;

    /* короткая запись */
    /* animation: moveSquare 6s linear alternate infinite; */
}

@keyframes moveSquare {

    0% { transform: none;}

    25%{transform:translateX(96px)}
    
    50%{transform:translate(96px,146px);
        border-radius: 0%;
    }
    
    70% {
        transform:translate(96px,146px) scale(2) rotate(145deg);
        border-radius: 20%;
    }
    90% {
        border-radius: 50%;
        transform:translate(96px,146px) scale(1) rotate(360deg);
    }
    100% {
        border-radius: 50%;
        transform:translate(96px,146px) scale(1) rotate(360deg);
    }
}

.animation1:hover {
    
    background-color:#FFFF00 ;

    transition: background-color 500ms linear; 

}