Jump to content

reset animation after hover (css)

Recommended Posts


how can i change this code that reset after hover?

and other when we click on link ?


<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@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;
  animation: swing 1.2s linear infinite;  /* animation set */
  animation-play-state: paused;               /* but paused */
  animation-play-state: running;     
  /* trigger on hover */

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



Edited by mohammad2232

Share this post

Link to post
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