CSS Animations

Transitions

We can set transitions on css properties, a common one is for the background color of a button on hover

a {
   transition-duration: 1s;
   transition-property: background;
   transition-timing-function: ease-in-out;
   transition-delay: 0;
}

a:hover {
    background: #44f;
}

Transforms

Rotate

.box {
    background: #f44;
    transform: rotate(120deg);
    transition-duration: 0.4s;
}

.box:hover {
    transform: rotate(0deg);
}

Scale

.box {
    transform: scale(1);
    transition-duration: 0.4s;
}

.box:hover {
    transform: scale(2);
}

Translate

This transform property is to move something by its x or y axis

.box {
    transform: translate(100px, 100px);
    transition-duration: 0.4s;
}

.box:hover {
    transform: translate(0,0);
}