body {
    font-family: Arial, sans-serif;
}


/* transition */

.transition-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid black;
    transition: width 2s, background-color 2s, border 2s;
}

.transition-box:hover {
    width: 400px;
    background-color: orange;
    border: 8px solid black;
}


/* continuous animation */

.continuous-animation {
    width: 200px;
    height: 100px;
    background-color: purple;
    color: white;

    animation-name: colorChange;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes colorChange {

    from {
        background-color: purple;
    }

    to {
        background-color: green;
    }

}


/* hover animation */

.hover-animation {
    width: 200px;
    height: 100px;
    background-color: red;
    color: white;
}

.hover-animation:hover {
    animation-name: moveBox;
    animation-duration: 2s;
}

@keyframes moveBox {

    0% {
        transform: translateX(0);
        background-color: red;
    }

    50% {
        transform: translateX(200px);
        background-color: blue;
    }

    100% {
        transform: translateX(0);
        background-color: red;
    }

}


.gradient-box {
    width: 300px;
    height: 150px;
    background: linear-gradient(lightblue, darkblue);
    color: white;
}