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:

```css
.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);
}
```

```html
<div class="circle"></div>
```

Thank you very much already.