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
0give a positive ratinggive a negative ratingshow 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
0give a positive ratinggive a negative ratingshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook
2022 AnswerTabsTermsContact us