CSS ease in and out on hover
12,331
Put transition
only on the normal state:
.design-box {
transition: all 1s ease;
}
Have a look at the snippet below:
.design-box {
width: 100%;
height: 250px;
margin: 100px auto;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
position: relative;
transition: all 1s ease;
}
.design-box:hover {
border-radius: 0;
}
<div class="design-box"></div>
Author by
rufus
Updated on June 24, 2022Comments
-
rufus almost 2 years
I have a simple div that is round with a
border-radius
of 50%. Onhover
the border radius changes to zero. I have used the following css code which works perfectly..design-box { width: 100%; height: 250px; margin: 100px auto; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; position: relative; } .design-box:hover { border-radius: 0; -webkit-transition: all 1s ease; transition: all 1s ease; }
<div class="design-box"></div>
What I would like to happen is that when the div is no longer hovered I would like the transition to
ease out
and slowly transform back to the originalborder-radius
of 50%. I cant quite get it to work, am I missing a simple step here?Thank you
-
wbdlc over 7 yearsadd the transitions to the .design-box class, not the hover
-