CODEWITHSUNDEEP
cssanimationtranslate
Nassim Betrouni
Nassim Betrouni

Reputation: 1

CSS translateX() animation resets whenever mouse stay on element

Hi im working on a CSS only animation and I need to make a block appear on a card here the 0% and 100% animation transition that activates herself with :hover

0% 100%

My need is to make the animation stay on the screen as long as my mouse is on element

TYsm

Upvotes: 0

Views: 60

Answers (1)

Francesco
Francesco

Reputation: 11

Truing using this code

div {
  width: 100px;
  height: 100px;
}

div:hover{
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {width: 0%; height:0%}
  to {width: 100%; height: 100%}
}

Upvotes: 1

Related Questions