CSS3 - Effects

HTML & CSS
1

Hello
I did the code to shake ball, when i do mouse hover.
Is possible when i remove “mouse”, the ball continue shake?
Thanks!

<html>
<head>
<style>
.ball:hover{ 
  animation: animationFrames linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 0%;
  -webkit-animation: animationFrames linear 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 0%;
  -moz-animation: animationFrames linear 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 0%;
  -o-animation: animationFrames linear 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 0%;
  -ms-animation: animationFrames linear 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 0%;
}


@keyframes animationFrames{
  0% {
    transform:  rotate(0deg) ;
  }
  20% {
    transform:  rotate(15deg) ;
  }
  40% {
    transform:  rotate(-10deg) ;
  }
  60% {
    transform:  rotate(5deg) ;
  }
  80% {
    transform:  rotate(-5deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}


@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  20% {
    -moz-transform:  rotate(15deg) ;
  }
  40% {
    -moz-transform:  rotate(-10deg) ;
  }
  60% {
    -moz-transform:  rotate(5deg) ;
  }
  80% {
    -moz-transform:  rotate(-5deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}


@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  rotate(15deg) ;
  }
  40% {
    -webkit-transform:  rotate(-10deg) ;
  }
  60% {
    -webkit-transform:  rotate(5deg) ;
  }
  80% {
    -webkit-transform:  rotate(-5deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}


@-o-keyframes animationFrames {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  20% {
    -o-transform:  rotate(15deg) ;
  }
  40% {
    -o-transform:  rotate(-10deg) ;
  }
  60% {
    -o-transform:  rotate(5deg) ;
  }
  80% {
    -o-transform:  rotate(-5deg) ;
  }
  100% {
    -o-transform:  rotate(0deg) ;
  }
}


@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  20% {
    -ms-transform:  rotate(15deg) ;
  }
  40% {
    -ms-transform:  rotate(-10deg) ;
  }
  60% {
    -ms-transform:  rotate(5deg) ;
  }
  80% {
    -ms-transform:  rotate(-5deg) ;
  }
  100% {
    -ms-transform:  rotate(0deg) ;
  }
}
</style>
</head>


<body>
<img src="http://i.imgur.com/ZHf8dsG.png" class="ball"/>
</body>
</html>
2

Hi,
I think that you will need to do this with JS and add a class on hover to cntinue the animation.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.ball:hover,.animate {
    animation: animationFrames linear 1s;
    animation-iteration-count: infinite;
    transform-origin: 50% 0%;
    -webkit-animation: animationFrames linear 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 0%;
    -moz-animation: animationFrames linear 2s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 0%;
    -o-animation: animationFrames linear 2s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 0%;
    -ms-animation: animationFrames linear 2s;
    -ms-animation-iteration-count:infinite;
    -ms-transform-origin: 50% 0%;
}
 @keyframes animationFrames {
 0% {
 transform:  rotate(0deg);
}
 20% {
 transform:  rotate(15deg);
}
 40% {
 transform:  rotate(-10deg);
}
 60% {
 transform:  rotate(5deg);
}
 80% {
 transform:  rotate(-5deg);
}
 100% {
 transform:  rotate(0deg);
}
}
 @-moz-keyframes animationFrames {
 0% {
 -moz-transform:  rotate(0deg);
}
 20% {
 -moz-transform:  rotate(15deg);
}
 40% {
 -moz-transform:  rotate(-10deg);
}
 60% {
 -moz-transform:  rotate(5deg);
}
 80% {
 -moz-transform:  rotate(-5deg);
}
 100% {
 -moz-transform:  rotate(0deg);
}
}
 @-webkit-keyframes animationFrames {
 0% {
 -webkit-transform:  rotate(0deg);
}
 20% {
 -webkit-transform:  rotate(15deg);
}
 40% {
 -webkit-transform:  rotate(-10deg);
}
 60% {
 -webkit-transform:  rotate(5deg);
}
 80% {
 -webkit-transform:  rotate(-5deg);
}
 100% {
 -webkit-transform:  rotate(0deg);
}
}
 @-o-keyframes animationFrames {
 0% {
 -o-transform:  rotate(0deg);
}
 20% {
 -o-transform:  rotate(15deg);
}
 40% {
 -o-transform:  rotate(-10deg);
}
 60% {
 -o-transform:  rotate(5deg);
}
 80% {
 -o-transform:  rotate(-5deg);
}
 100% {
 -o-transform:  rotate(0deg);
}
}
 @-ms-keyframes animationFrames {
 0% {
 -ms-transform:  rotate(0deg);
}
 20% {
 -ms-transform:  rotate(15deg);
}
 40% {
 -ms-transform:  rotate(-10deg);
}
 60% {
 -ms-transform:  rotate(5deg);
}
 80% {
 -ms-transform:  rotate(-5deg);
}
 100% {
 -ms-transform:  rotate(0deg);
}
}
</style>
</head>

<body>
<img id="ball" src="http://i.imgur.com/ZHf8dsG.png" class="ball"/>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$( "#ball" ).mouseenter(function() {
 $(this).addClass('animate');
});
</script>

</html>

I used jquery to add the class (because my js is rubbish) but if you aren’t using jquery in your project then it would be better with vanilla js instead.

3

Thank you.
Should help.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.