primjer14.css

/*
* {
    border: 1px solid black;
}
*/

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

.container {
    font-weight: bold;
    height: 380px;
    width: 602px;
    position: relative;
    border: 2px solid black;
    text-align: center;
}

.container div {
    font-weight: normal;
    text-align: center;
    background-color: lightgoldenrodyellow;
    width: 100px;
    height: 100px;
    border: 2px solid black;
    border-radius: 25px;
    position: absolute;
    left: 0px;
    transition-property: left, background-color;
    transition-duration: 2s;
}

.timing1 {
    transition-timing-function: linear;
}

.timing2 {
    margin-top: 110px;
    transition-timing-function: ease-in-out;
}

.timing3 {
    margin-top: 220px;
    transition-timing-function: ease-in;
}

.container:hover div {
    background-color: red;
    left: 500px;
}