I am new to CSS-Animation, so maybe the answer for you is easy. But I couldn't find an answer here yet.
I want an Element to start an animation on hover and then never end. It's for an art project because practically it doesn't make any sense.
What I have got is: A little circle, when on hover it starts getting bigger and bigger. And I want that animation to continue endlessly (or fake it like endlessly with transition: 100000s or sth like that).
Any idea how to manage that?
What I have got is this:
.circle{
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1000s;
}
.circle:hover{
transform: scale(8000);
}
.circle:hover{
transform: scale(8000);
}
<div class="circle"></div>
Thank you very much already.
:hover
only applies as long as you hover, afterwards the element will fall back to its “default” formatting. You need to use JavaScript to trigger this - add a class to the element on first mouseover, that triggers this transition.