僅在特定頁面上使用CSS3動畫

這是我爲CSS3動畫編寫的代碼：我在其中一個導航鏈接上應用了搖動。它的作用就像是一種魅力，但我希望當有人打開鏈接到它的頁面時，它就會關閉。僅在特定頁面上使用CSS3動畫

我該如何解決這個問題？

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

來源

2016-03-18 BlueBird03

不能切實用CSS或HTML單獨做到這一點，你需要實現某種邏輯上這一切之上。例如，它可能是一些基於當前URL的JavaScript將CSS類添加到禁用動畫的'body'元素。 – damd

您能否提供您的HTML並將片段更新爲工作片段，以便我們更好地理解目標是什麼？ – somethinghere

一種方法是設置一個類在身體上，這樣，並使用: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>

來源

2016-03-18 15:32:16 LGSon

優秀，作品！謝謝！ ps。如果你把類放在「（）」中，那麼它只會在那個頁面上工作，因爲它的語法如下所示： body：not（#blabla） - 所以你會希望它不能只在那個頁面上工作，但它只適用於那裏，如果你知道我的意思是哈哈。 – BlueBird03

僅在特定頁面上使用CSS3動畫

回答

相關問題