Smooth move of HTML elements - animation with CSS

Is it possible to set smoothly moving of the HTML elements by using only CSS ?

Hi,

You can use CSS property transition to smoothly move, change size, change position, change color or other attribute of HTML element. To set an animation, you have to include the transition property into the specific style and set the attributes. For example:


Smooth change of width on hover in 2 seconds:

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}

Smooth change of textbox size on focus:

.in {
font-size: 13pt;
font-family: Arial;
padding: 5px;
width: 180px;
transition: width .75s;
}

.in:focus {
width: 250px;
}

Smooth move of element:

div {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: red;
transition: top 1s, left 1s;
}

div:hover {
top: 100px;
left: 100px;
}

Smooth change of color:

div {
font-family: Arial;
font-size: 12pt;
color: #0000FF;
transition: color 1s;
}

div:hover {
color: #000000;
}