body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 20px;
}

div {
    width: 180px;
    height: 80px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Timed transition triggered by hover */
.transition-box {
    background-color: lightblue;
    border: 2px solid navy;
    transition: width 1s, background-color 1s;
}

.transition-box:hover {
    width: 260px;
    background-color: lightgreen;
}

/* Timed animation that runs continuously on page load */
.continuous-box {
    background-color: lightcoral;
    animation: colorChange 3s infinite alternate;
}

@keyframes colorChange {
    from {
        background-color: lightcoral;
    }
    to {
        background-color: khaki;
    }
}

/* Timed animation triggered by hover */
.hover-animation-box {
    background-color: lightgray;
}

.hover-animation-box:hover {
    animation: moveBox 1s;
}

@keyframes moveBox {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(80px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Gradient background example */
.gradient-box {
    background: linear-gradient(to right, lightblue, lightpink);
}