'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

cssanimationtranslate


Solution 1:[1]

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%}
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Francesco

Related Questions