Question

这是我的CSS3动画代码：我在其中一个导航链接上应用的摇动。它就像一个魅力，但我希望当有人打开它链接到它的页面时它就会关闭。

我该如何解决这个问题？

＆＃13;

#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);
  }
}

＆＃13;

Answer 1

一种方法是在身体上设置一个类，如下所示，并使用:not选择器

样品不摇晃

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>

摇晃样品

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>

仅限某些页面上的CSS3动画

1 个答案: