.box{
    background-image: linear-gradient(cyan, lime);
    width: 80px;
    height: 60px;
    border: 2px outset cyan;
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
}

.hover-box{
    display: inline-block;

    scale: 1;

    /* This part sets up the transition */
    transition: 2s ease;
    transition-property: scale;
}

.hover-box:hover{
    scale: 2;
}

#box1{
    position: relative;
    left: 0%;

    transition: 1s ease;
    transition-property: left;
}

#box1.right{
    left: 80%;
}


@keyframes coolAnimation {
    from{
        rotate: -10deg;
    }

    to{
        rotate: 20deg;
    }
}

#box2{
    animation-name: coolAnimation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#box2{
    width: 100px;
}