Cannot apply CSS shake effect to body

  • A+
Category:Languages

I have a class image which is added to the body using a jQuery function:

$('body').addClass('image').addClass('shake'); 

When I try to add a shake effect using class shake it doesn't give the shake effect:

$('body').addClass('image').addClass('shake'); 

How can I correct my code to get the shake effect for the image added to body? Is it a problem with jQuery or something else?

$(document).ready(function() {   $('body').addClass('image').addClass('shake'); });
@import url(https://fonts.googleapis.com/css?family=Gentium+Basic); @import url(https://fonts.googleapis.com/css?family=Dancing+Script); .image {   background-image: url(https://picsum.photos/200/300?image=0); }  .shake {   display: inline-block;   -webkit-transform-origin: center center;   -ms-transform-origin: center center;   -webkit-transform-origin: center center; }  .shake:hover {   -webkit-animation-name: shake-base;   -ms-animation-name: shake-base;   -webkit-animation-name: shake-base;   -webkit-animation-duration: 100ms;   -ms-animation-duration: 100ms;   -webkit-animation-duration: 100ms;   -webkit-animation-iteration-count: infinite;   -ms-animation-iteration-count: infinite;   -webkit-animation-iteration-count: infinite;   -webkit-animation-timing-function: ease-in-out;   -ms-animation-timing-function: ease-in-out;   -webkit-animation-timing-function: ease-in-out;   -webkit-animation-delay: 0s;   -ms-animation-delay: 0s;   -webkit-animation-delay: 0s; }  @-webkit-keyframes shake-base {   0% {     -webkit-transform: translate(0px, 0px) rotate(0deg);   }   2% {     -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg);   }   4% {     -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg);   }   6% {     -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg);   }   8% {     -webkit-transform: translate(-0.5px, -1.5px) rotate(-1.5deg);   }   10% {     -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg);   }   12% {     -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg);   }   14% {     -webkit-transform: translate(1.5px, 1.5px) rotate(-0.5deg);   }   16% {     -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg);   }   18% {     -webkit-transform: translate(-0.5px, -1.5px) rotate(0.5deg);   }   20% {     -webkit-transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   22% {     -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg);   }   24% {     -webkit-transform: translate(-2.5px, 1.5px) rotate(-1.5deg);   }   26% {     -webkit-transform: translate(1.5px, -0.5px) rotate(-1.5deg);   }   28% {     -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg);   }   30% {     -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg);   }   32% {     -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg);   }   34% {     -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg);   }   36% {     -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg);   }   38% {     -webkit-transform: translate(1.5px, -0.5px) rotate(-0.5deg);   }   40% {     -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg);   }   42% {     -webkit-transform: translate(-2.5px, 1.5px) rotate(-1.5deg);   }   44% {     -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg);   }   46% {     -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg);   }   48% {     -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg);   }   50% {     -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg);   }   52% {     -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg);   }   54% {     -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg);   }   56% {     -webkit-transform: translate(1.5px, -0.5px) rotate(-0.5deg);   }   58% {     -webkit-transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   60% {     -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg);   }   62% {     -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg);   }   64% {     -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg);   }   66% {     -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg);   }   68% {     -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg);   }   70% {     -webkit-transform: translate(0.5px, -2.5px) rotate(-1.5deg);   }   72% {     -webkit-transform: translate(0.5px, -1.5px) rotate(0.5deg);   }   74% {     -webkit-transform: translate(-2.5px, 1.5px) rotate(-0.5deg);   }   76% {     -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg);   }   78% {     -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg);   }   80% {     -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg);   }   82% {     -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg);   }   84% {     -webkit-transform: translate(-1.5px, 1.5px) rotate(-0.5deg);   }   86% {     -webkit-transform: translate(-2.5px, 1.5px) rotate(-0.5deg);   }   88% {     -webkit-transform: translate(-1.5px, -2.5px) rotate(-0.5deg);   }   90% {     -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg);   }   92% {     -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);   }   94% {     -webkit-transform: translate(-0.5px, -1.5px) rotate(-1.5deg);   }   96% {     -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg);   }   98% {     -webkit-transform: translate(1.5px, -2.5px) rotate(-1.5deg);   } }  @-ms-keyframes shake-base {   0% {     -ms-transform: translate(0px, 0px) rotate(0deg);   }   2% {     -ms-transform: translate(1.5px, 1.5px) rotate(0.5deg);   }   4% {     -ms-transform: translate(0.5px, -2.5px) rotate(-0.5deg);   }   6% {     -ms-transform: translate(-2.5px, 1.5px) rotate(-1.5deg);   }   8% {     -ms-transform: translate(-2.5px, -0.5px) rotate(-1.5deg);   }   10% {     -ms-transform: translate(-1.5px, -0.5px) rotate(-1.5deg);   }   12% {     -ms-transform: translate(-0.5px, -2.5px) rotate(-1.5deg);   }   14% {     -ms-transform: translate(-2.5px, -2.5px) rotate(0.5deg);   }   16% {     -ms-transform: translate(-1.5px, -1.5px) rotate(-0.5deg);   }   18% {     -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg);   }   20% {     -ms-transform: translate(-1.5px, 0.5px) rotate(-0.5deg);   }   22% {     -ms-transform: translate(1.5px, -1.5px) rotate(-1.5deg);   }   24% {     -ms-transform: translate(-2.5px, -0.5px) rotate(-0.5deg);   }   26% {     -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg);   }   28% {     -ms-transform: translate(0.5px, -1.5px) rotate(-0.5deg);   }   30% {     -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg);   }   32% {     -ms-transform: translate(-1.5px, 1.5px) rotate(-0.5deg);   }   34% {     -ms-transform: translate(-0.5px, -1.5px) rotate(-1.5deg);   }   36% {     -ms-transform: translate(1.5px, -0.5px) rotate(-0.5deg);   }   38% {     -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg);   }   40% {     -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg);   }   42% {     -ms-transform: translate(-0.5px, 1.5px) rotate(-0.5deg);   }   44% {     -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg);   }   46% {     -ms-transform: translate(1.5px, 0.5px) rotate(-1.5deg);   }   48% {     -ms-transform: translate(1.5px, 0.5px) rotate(0.5deg);   }   50% {     -ms-transform: translate(-0.5px, -0.5px) rotate(-0.5deg);   }   52% {     -ms-transform: translate(-2.5px, 1.5px) rotate(0.5deg);   }   54% {     -ms-transform: translate(-0.5px, -2.5px) rotate(0.5deg);   }   56% {     -ms-transform: translate(-0.5px, 1.5px) rotate(0.5deg);   }   58% {     -ms-transform: translate(-1.5px, 0.5px) rotate(-0.5deg);   }   60% {     -ms-transform: translate(-0.5px, -1.5px) rotate(0.5deg);   }   62% {     -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg);   }   64% {     -ms-transform: translate(0.5px, 0.5px) rotate(-1.5deg);   }   66% {     -ms-transform: translate(-0.5px, 1.5px) rotate(-1.5deg);   }   68% {     -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg);   }   70% {     -ms-transform: translate(-1.5px, -2.5px) rotate(-1.5deg);   }   72% {     -ms-transform: translate(-2.5px, -0.5px) rotate(-1.5deg);   }   74% {     -ms-transform: translate(0.5px, 1.5px) rotate(0.5deg);   }   76% {     -ms-transform: translate(-2.5px, -2.5px) rotate(-1.5deg);   }   78% {     -ms-transform: translate(-1.5px, -1.5px) rotate(-0.5deg);   }   80% {     -ms-transform: translate(-1.5px, -0.5px) rotate(-1.5deg);   }   82% {     -ms-transform: translate(0.5px, 1.5px) rotate(-1.5deg);   }   84% {     -ms-transform: translate(-2.5px, 0.5px) rotate(-1.5deg);   }   86% {     -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg);   }   88% {     -ms-transform: translate(0.5px, -2.5px) rotate(0.5deg);   }   90% {     -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg);   }   92% {     -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg);   }   94% {     -ms-transform: translate(-0.5px, 1.5px) rotate(-0.5deg);   }   96% {     -ms-transform: translate(-1.5px, 0.5px) rotate(-0.5deg);   }   98% {     -ms-transform: translate(-0.5px, -1.5px) rotate(-1.5deg);   } }  @keyframes shake-base {   0% {     transform: translate(0px, 0px) rotate(0deg);   }   2% {     transform: translate(-2.5px, -2.5px) rotate(-1.5deg);   }   4% {     transform: translate(1.5px, 0.5px) rotate(0.5deg);   }   6% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   8% {     transform: translate(-0.5px, 1.5px) rotate(-1.5deg);   }   10% {     transform: translate(0.5px, 0.5px) rotate(0.5deg);   }   12% {     transform: translate(1.5px, -2.5px) rotate(-0.5deg);   }   14% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   16% {     transform: translate(-1.5px, -2.5px) rotate(0.5deg);   }   18% {     transform: translate(0.5px, -2.5px) rotate(-0.5deg);   }   20% {     transform: translate(-2.5px, -2.5px) rotate(0.5deg);   }   22% {     transform: translate(-0.5px, -1.5px) rotate(0.5deg);   }   24% {     transform: translate(-1.5px, -2.5px) rotate(-1.5deg);   }   26% {     transform: translate(-1.5px, 1.5px) rotate(-0.5deg);   }   28% {     transform: translate(0.5px, 1.5px) rotate(-1.5deg);   }   30% {     transform: translate(-0.5px, 1.5px) rotate(0.5deg);   }   32% {     transform: translate(-1.5px, 0.5px) rotate(0.5deg);   }   34% {     transform: translate(-2.5px, 1.5px) rotate(0.5deg);   }   36% {     transform: translate(-0.5px, -2.5px) rotate(-0.5deg);   }   38% {     transform: translate(0.5px, 1.5px) rotate(-0.5deg);   }   40% {     transform: translate(1.5px, -1.5px) rotate(-0.5deg);   }   42% {     transform: translate(-0.5px, 0.5px) rotate(-0.5deg);   }   44% {     transform: translate(1.5px, 1.5px) rotate(0.5deg);   }   46% {     transform: translate(0.5px, -1.5px) rotate(0.5deg);   }   48% {     transform: translate(-1.5px, 0.5px) rotate(-1.5deg);   }   50% {     transform: translate(-0.5px, -1.5px) rotate(-0.5deg);   }   52% {     transform: translate(-0.5px, 1.5px) rotate(-0.5deg);   }   54% {     transform: translate(-1.5px, 1.5px) rotate(0.5deg);   }   56% {     transform: translate(-1.5px, -0.5px) rotate(-0.5deg);   }   58% {     transform: translate(1.5px, 0.5px) rotate(-0.5deg);   }   60% {     transform: translate(1.5px, 0.5px) rotate(-0.5deg);   }   62% {     transform: translate(-1.5px, -1.5px) rotate(0.5deg);   }   64% {     transform: translate(1.5px, 0.5px) rotate(-1.5deg);   }   66% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   68% {     transform: translate(0.5px, -2.5px) rotate(-1.5deg);   }   70% {     transform: translate(0.5px, -2.5px) rotate(-1.5deg);   }   72% {     transform: translate(1.5px, -1.5px) rotate(0.5deg);   }   74% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   76% {     transform: translate(1.5px, -1.5px) rotate(-0.5deg);   }   78% {     transform: translate(1.5px, -1.5px) rotate(-1.5deg);   }   80% {     transform: translate(-2.5px, -1.5px) rotate(-1.5deg);   }   82% {     transform: translate(1.5px, -2.5px) rotate(-0.5deg);   }   84% {     transform: translate(1.5px, -2.5px) rotate(-0.5deg);   }   86% {     transform: translate(1.5px, 0.5px) rotate(0.5deg);   }   88% {     transform: translate(-2.5px, 0.5px) rotate(-1.5deg);   }   90% {     transform: translate(0.5px, 1.5px) rotate(0.5deg);   }   92% {     transform: translate(-1.5px, 1.5px) rotate(0.5deg);   }   94% {     transform: translate(-0.5px, 0.5px) rotate(-1.5deg);   }   96% {     transform: translate(1.5px, -2.5px) rotate(0.5deg);   }   98% {     transform: translate(-2.5px, -0.5px) rotate(-1.5deg);   } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 


it's working fine but the background you see is moved to the canvas and no more belong to the body element. and your body element has 0 height since there is no content inside it. What you see isn't the body element (this one is not visible) but the canvas (your browser window) that has stolen the background from the body.

Change the background of the html (so that the canvas take this one) and give body some height to see the effect:

$(document).ready(function() {   $('body').addClass('image').addClass('shake'); });
@import url(https://fonts.googleapis.com/css?family=Gentium+Basic); @import url(https://fonts.googleapis.com/css?family=Dancing+Script); .image {   background-image: url(https://picsum.photos/200/300?image=0);   height:200px; }  html {   background:red; }  .shake {   transform-origin: center center;; }  .shake:hover {   animation: shake-base 100ms infinite ease-in-out; }  @keyframes shake-base {   0% {     transform: translate(0px, 0px) rotate(0deg);   }   2% {     transform: translate(-2.5px, -2.5px) rotate(-1.5deg);   }   4% {     transform: translate(1.5px, 0.5px) rotate(0.5deg);   }   6% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   8% {     transform: translate(-0.5px, 1.5px) rotate(-1.5deg);   }   10% {     transform: translate(0.5px, 0.5px) rotate(0.5deg);   }   12% {     transform: translate(1.5px, -2.5px) rotate(-0.5deg);   }   14% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   16% {     transform: translate(-1.5px, -2.5px) rotate(0.5deg);   }   18% {     transform: translate(0.5px, -2.5px) rotate(-0.5deg);   }   20% {     transform: translate(-2.5px, -2.5px) rotate(0.5deg);   }   22% {     transform: translate(-0.5px, -1.5px) rotate(0.5deg);   }   24% {     transform: translate(-1.5px, -2.5px) rotate(-1.5deg);   }   26% {     transform: translate(-1.5px, 1.5px) rotate(-0.5deg);   }   28% {     transform: translate(0.5px, 1.5px) rotate(-1.5deg);   }   30% {     transform: translate(-0.5px, 1.5px) rotate(0.5deg);   }   32% {     transform: translate(-1.5px, 0.5px) rotate(0.5deg);   }   34% {     transform: translate(-2.5px, 1.5px) rotate(0.5deg);   }   36% {     transform: translate(-0.5px, -2.5px) rotate(-0.5deg);   }   38% {     transform: translate(0.5px, 1.5px) rotate(-0.5deg);   }   40% {     transform: translate(1.5px, -1.5px) rotate(-0.5deg);   }   42% {     transform: translate(-0.5px, 0.5px) rotate(-0.5deg);   }   44% {     transform: translate(1.5px, 1.5px) rotate(0.5deg);   }   46% {     transform: translate(0.5px, -1.5px) rotate(0.5deg);   }   48% {     transform: translate(-1.5px, 0.5px) rotate(-1.5deg);   }   50% {     transform: translate(-0.5px, -1.5px) rotate(-0.5deg);   }   52% {     transform: translate(-0.5px, 1.5px) rotate(-0.5deg);   }   54% {     transform: translate(-1.5px, 1.5px) rotate(0.5deg);   }   56% {     transform: translate(-1.5px, -0.5px) rotate(-0.5deg);   }   58% {     transform: translate(1.5px, 0.5px) rotate(-0.5deg);   }   60% {     transform: translate(1.5px, 0.5px) rotate(-0.5deg);   }   62% {     transform: translate(-1.5px, -1.5px) rotate(0.5deg);   }   64% {     transform: translate(1.5px, 0.5px) rotate(-1.5deg);   }   66% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   68% {     transform: translate(0.5px, -2.5px) rotate(-1.5deg);   }   70% {     transform: translate(0.5px, -2.5px) rotate(-1.5deg);   }   72% {     transform: translate(1.5px, -1.5px) rotate(0.5deg);   }   74% {     transform: translate(1.5px, -0.5px) rotate(0.5deg);   }   76% {     transform: translate(1.5px, -1.5px) rotate(-0.5deg);   }   78% {     transform: translate(1.5px, -1.5px) rotate(-1.5deg);   }   80% {     transform: translate(-2.5px, -1.5px) rotate(-1.5deg);   }   82% {     transform: translate(1.5px, -2.5px) rotate(-0.5deg);   }   84% {     transform: translate(1.5px, -2.5px) rotate(-0.5deg);   }   86% {     transform: translate(1.5px, 0.5px) rotate(0.5deg);   }   88% {     transform: translate(-2.5px, 0.5px) rotate(-1.5deg);   }   90% {     transform: translate(0.5px, 1.5px) rotate(0.5deg);   }   92% {     transform: translate(-1.5px, 1.5px) rotate(0.5deg);   }   94% {     transform: translate(-0.5px, 0.5px) rotate(-1.5deg);   }   96% {     transform: translate(1.5px, -2.5px) rotate(0.5deg);   }   98% {     transform: translate(-2.5px, -0.5px) rotate(-1.5deg);   } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: