Menu
Im trying to animate a round border, that becomes square when you hover, and goes back to a circle after you unhover. Despite my best efforts, i can't seem to make it work. Here is what i have so far.
@keyframes mymove {
from {
border-radius: 100% 100%;
}
to {
border-radius: 0px, 0px;
}
}
@keyframes mymoveback {
from {
border-radius: 0px 0px;
}
to {
border-radius: 100%, 100%;
}
}
.testButt {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation: mymoveback 3s;
animation-fill-mode: forwards;
}
.testButt:hover {
-webkit-animation-fill-mode: forwards;
animation: mymove 2s;
animation-fill-mode: forwards;
}<br><br><br>
<div class="testButt">
<br><br> Log In
</div>
703
Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates. This is a simple trick. You set transitions on both states, like this: When you hover over, the :hover transition overrides the transition set in the regular state, and that property animates.
Solutions with CSS¶ To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element ... We add the :hover pseudo-class to the "button-blue" and "button-green" classes, but disable this behavior for the "disabled" class with the pointer-events property.
The problem is that anything you change with the :hover pseudo-class selector will not (and/or should not) match elements over which you are no longer hovering. The only way you are likely to be able to do this with pure CSS is with CSS3 Animations.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
You over complicate it, simply use transition like this:
.testButt {
width: 100px;
height: 100px;
padding:40px 0;
text-align:center;
box-sizing:border-box;
background: red;
position: relative;
border-radius: 50%;
transition: 0.5s;
}
.testButt:hover {
border-radius: 0%;
}<div class="testButt">
Log In
</div>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
