/*
Ideas from Udemy Web Dev Bootcamp
https://easings.net/
*/
.circle {
    width: 300px;
    height: 300px;
    background-color: magenta;
    transition: background-color 1s ease-in, border-radius 2s;
}

.circle:hover {
    background-color: cyan;
    border-radius: 50%;
}


 section div {
    height: 100px;
    width: 100px;
    background-color: turquoise;
    margin: 20px 0;
    transition: margin-left 3s;
} 

section:hover div {
    margin-left:500px;
}

div:nth-of-type(1){
    transition-timing-function: ease-in;
}
div:nth-of-type(2){
    transition-timing-function: ease-out;
}
div:nth-of-type(3){
    transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}
div:nth-of-type(4){
    transition-timing-function:  cubic-bezier(0.85, 0, 0.15, 1);
}