Menu
I am trying learning basics of HTML/CSS. I learned about :hover in css, that when the cursor is hover the element, something happend according to the code written. Then, you can also use transition tag, to make the transformation take some time. But, when the cursor goes out of the element, it comes back to the original position, without making the transition, and that is horrible. Here is the code I wrote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display:block;
width: 10px;
height: 10px;
background-color: red;
border-radius:10px;
}
.required::after {
content: '';
display:inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
}
.required:hover::after{
transform: translateX(100px);
transition: 1s;
}
</style>
</head>
<body>
<label class = required>Name</label>
</body>
</html>
When cursor hover, the cube moves, in a rime of 1s. Mouse out, it instantly returns in his first position. I would like that it returns in the position in the same amount of type. Hope I'm enought clear in my description. Thanks for your help
Put transition in .required::after because putting transition here make the hover effect to take a fix amount of time for start/end of effect while putting it in :hover make its start time as fix value while it don't specify its end time.
If want to apply transition on fix property use that property name before time in transition like here you can write transition: transform 1s; so transition will be applied on transform property value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;/*Put transition here*/
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class="required">Name</label>
</body>
</html>
148
In addition to previous answers, which correctly tells you to move the transition property to .required::after, you also need to be careful using transform: 1s without property names. By default this will create transitions for ALL properties.
31
answered Dec 23 '25 01:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
