javascript FadeInUp css动画不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18337404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FadeInUp css animation not working
提问by NewKidOnTheBlock
I made attempts to create a CSS animation, when you hover over the box, it reveals the div using CSS animations. I have used the following site as reference. click herehowever i can't seem to achieved the efx. On my site i have use JqUERY for a show and hide function, my addClass and RemoveClass works however overall the function isn't working how it should do. Can someone guide me in the right direction.
我尝试创建一个 CSS 动画，当您将鼠标悬停在框上时，它会使用 CSS 动画显示 div。我使用以下网站作为参考。单击此处但我似乎无法实现 efx。在我的网站上，我使用 JqUERY 来显示和隐藏功能，我的 addClass 和 RemoveClass 可以工作，但总体而言，该功能无法正常工作。有人可以指导我朝着正确的方向前进。
/** HTML **/
/ ** HTML **/
div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
/*jquery **/
/ *jquery **/
$(".overlay").addClass("visible");
$(".overlay").removeClass("visible");
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("visible");
});
$(".trigger").mouseleave(function(){
var $this = $(this);
$this.next(".overlay").removeClass("visible");
});
/** CSS ANIMATION **/
/ ** CSS 动画 **/
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@-Webkit-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
采纳答案by user1333371
Try using the css classes that you have provided, and pass a second parameter to the "addClass" call indicating the number of milliseconds that it should animate. For example:
尝试使用您提供的 css 类，并将第二个参数传递给“addClass”调用，指示它应该设置动画的毫秒数。例如：
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("fadeInDown", 1000);
});
回答by Arshid KV
Add following css and HTML tag .
添加以下 css 和 HTML 标签。
HTML code:-
HTML代码：-
<h1 class="animated fadeInUp" >Example</h1>
CSS code:-
CSS 代码：-
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
