Hej there,

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. EasterEast

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.

Hej there,

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);
}

HTML

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

Thank you very much already. EasterEast

Hej there,

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. EasterEast