Animate an object

1st method: transition

The transition property smoothly changes the specified design element.

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

Example on JSFiddle

You can also specify the value all, and any changes to the object (for example, when you hover the mouse cursor) will be animated.

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

Example on JSFiddle

The animation time can be specified in seconds (s) and milliseconds (ms).

Through the third parameter you can set the animation behavior:

  • ease — play slowly, normally and slowly again;
  • ease-in — play slowly and then normally;
  • ease-out — play normally and then slowly;
  • ease-in-out — play slowly, a little faster and slow again.

Example on JSFiddle

2nd method: keyframes

Animation through keyframes is set in advance, and can be hung on any object through the animation property.

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

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

Example on JSFiddle