Smooth move of HTML elements - animation with CSS

Is it possible to set smoothly moving of the HTML elements by using only CSS ?
posted on 01.03.2020 at 13:29
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;
}

posted on 08.04.2020 at 16:47
0pnshow more
TimTim
share on facebookshare on twitter
2020 AnswerTabsTermsContact us
This site uses cookies to improve your experience, for analytics and ads. By continuing to browse this site you agree to our use of cookies.