0

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.

Improve this question
3
  • First of all, a transition and an animation are different things. Second, you can not really do this using CSS - :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.
    – CBroe
    Commented Apr 8, 2021 at 12:16
  • Do you want endless animation while the mouse cursor is on the circle? When the cursor is removed from the circle, the animation disappears. Right?
    – s.kuznetsov
    Commented Apr 8, 2021 at 12:26
  • Thanks for your answers guys. Now I can understand it better! Solutions of Mispell, George and Hypér function very well!
    – EasterEast
    Commented Apr 8, 2021 at 13:38

3 Answers 3

Reset to default
4

I changed the .circle:hover to a new class called "circleAnimation". Then, I gave the circle an onmouseenter event that adds it to the class (since the JavaScript is only one line, I entered it right into value of the onmouseenter event).

This is what the result looks like:

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.circleAnimation {
    transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('circleAnimation')"></div>

Hope this helped!

Improve this answer
1
  • Thank you very much this is awesome!
    – EasterEast
    Commented Apr 8, 2021 at 13:38
2

I think it can help you.

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.animate {
    transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>

You can also use onmouseover instead of onmouseenter.

Improve this answer
0
0 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .circle{
            background-color: orange;
            border-radius: 10px;
            width: 20px;
            height: 20px;
            margin-top: 10%;
            margin-left: 50%;
            transition: 1s;
        }
    </style>
</head>
<body>
    <div class="circle" onmouseover="changeScale(this)"></div>
    <script>
        function changeScale(circle){
            circle.style.transform = 'scale(80)';
        }
    </script>
</body>
</html>

Improve this answer
2
  • There's no need to use JS.
    – Sato Takeru
    Commented Apr 8, 2021 at 12:47
  • @George, I truly hope you understand that your answer, too, uses JavaScript.
    – Nora
    Commented Apr 8, 2021 at 18:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.