Css3 Animation Only On Certain Pages

This is my code for CSS3 animation: shake that I applied on one of the nav links. It works like a charm, but I want it turned off when someone opens the page that it is linked to i

Solution 1:

One way is to set a class on the body, like this, and use the :not selector

Sample not shaking

body:not(.pg313) #menu-item-313 {
  animation: shake 1.4s;
  -webkit-animation-iteration-count: 10; /* Chrome, Safari, Opera */animation-iteration-count: 6;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}

<bodyclass="pg313"><divid="menu-item-313">
     Menu item 313
  </div><divid="menu-item-314">
     Menu item 314
  </div></body>

Sample shaking

body:not(.pg313) #menu-item-313 {
  animation: shake 1.4s;
  -webkit-animation-iteration-count: 10; /* Chrome, Safari, Opera */animation-iteration-count: 6;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}

<bodyclass="pg314"><divid="menu-item-313">
     Menu item 313
  </div><divid="menu-item-314">
     Menu item 314
  </div></body>