Анимировать объект

1-ый способ: transition

Свойство transition плавно изменяет указанное оформление элемента.

div {
    background: blue;
    width: 200px;
    transition: background 0.3s, width 1.5s;
}

Пример на JSFiddle

Также можно указать значение all, и любое изменение объекта (например при наведении курсора мыши) будет выполняться анимировано.

div {
    background: blue;
    width: 200px;
    transition: all 0.5s;
}

Пример на JSFiddle

Время анимации можно задавать в секундах (s) и в миллисекундах (ms).

Через третий параметр можно задать поведение анимации:

• ease — проигрывать медленно, нормально и снова медленно;
• ease-in — проигрывать медленно и затем нормально;
• ease-out — проигрывать нормально и затем медленно;
• ease-in-out — проигрывать медленно, немного ускоренно и снова медленно.

Пример на JSFiddle

2-ой способ: keyframes

Анимация через keyframes задаётся заранее, и может быть задана на любой объект через свойство animation.

@keyframes myanimation {
    0% {color:red;}
    50% {color:green}
    100% {color:blue}
}

div {
    animation: myanimation 1s infinite alternate;
    float: left;
    font: 40px Verdana;
}

Пример на JSFiddle