仅在特定页面上使用CSS3动画 [英] CSS3 animation only on certain pages
本文介绍了仅在特定页面上使用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）;
解决方案 One方法是在body上设置一个类，如下所示，并使用：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>菜单项313< / div> < div id =menu-item-314>菜单项314< / div> < / body>
$ b
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>菜单项313< / div> < div id =menu-item-314>菜单项314< / div> < / body>
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 it.
How can I solve this problem?
#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);
}
}
解决方案 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>
这篇关于仅在特定页面上使用CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
