Jump to content

reset animation after hover (css)


mohammad2232

Recommended Posts

hello

how can i change this code that reset after hover?

and other when we click on link ?

https://www.w3schools.com/code/tryit.asp?filename=FMMNWG53ALUJ

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style> 
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: top center;
  animation-name: swing;
}
button{
  animation: swing 1.2s linear infinite;  /* animation set */
  animation-play-state: paused;               /* but paused */
}
button:hover{
  animation-play-state: running;     
  animation-play-state:reset;
  /* trigger on hover */
}

</style>
</head>
<body>
<button>
<i class="fa fa-car" style="font-size:60px;color:green;" > </i>
<p><b>Note:</b> This is my animation :) .</p>
</button>



</body>
</html>

Thanks

Edited by mohammad2232
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...