Skip to content Skip to sidebar Skip to footer
Home / Css / Html

CSS3 Animation Only On Certain Pages

Post a Comment
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);
  }
}
<body class="pg313">

  <div id="menu-item-313">
     Menu item 313
  </div>
  <div id="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);
  }
}
<body class="pg314">

  <div id="menu-item-313">
     Menu item 313
  </div>
  <div id="menu-item-314">
     Menu item 314
  </div>
  
</body>

Post a Comment for "CSS3 Animation Only On Certain Pages"