Smooth move of HTML elements - animation with CSS

Is it possible to set smoothly moving of the HTML elements by using only CSS ?
0
give a positive ratinggive a negative rating
01 Mar 2020 at 01:29 PM
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;
}

0
give a positive ratinggive a negative rating
08 Apr 2020 at 04:47 PM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
2024 AnswerTabsTermsContact us