Smooth move of HTML elements - animation with CSS

Is it possible to set smoothly moving of the HTML elements by using only CSS ?
01 Mar 2020 at 01:29 PM
0pnshow more
zeddzedd
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;
}

08 Apr 2020 at 04:47 PM
0pnshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook & Twitter
2022 AnswerTabsTermsContact us