div.animate {
    width: 200px;
    height: 150px;
    background-color: black;
    color: white;
    border-radius: 10px;
    
    display: flex;
    justify-content: center;
    align-items: center;

    animation: obracanie 6s linear 0 infinite;
}

@keyframes obracanie
{
    from 
    {
        transform: rotate(0deg);
        size: 100%;
    }

    to
    {
        transform: rotate(360deg);
    }
}



li:hover {
    color: white;
    cursor: progress;
}




/* ANIMACJA 2 */

.animation2 {
    border-radius: 10px;
    background-color: black;
    color: white;
    width: 200px;
    height: 150px;

    display: flex;
    justify-content: center;
    align-items: center;

    animation: obracanie2 5s linear 2s infinite normal forwards running;

}

@keyframes obracanie2 {
    0% {
    }

    30% {
        transform: rotate(180deg);
    }
    
    50% {
        transform: translate(20px, 0);
    }
    
    90% {
        transform: rotate(360deg);
        opacity: 0.4;
        transform: translate(20px, 0);
        
    }

    100% {}
}

.stopAnimation {
    animation-play-state: paused;
}


/* KONIEC ANIMACJI 2 */