FadeInUp css animation not working
16,197
Solution 1
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:
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("fadeInDown", 1000);
});
Solution 2
Add following css and HTML tag .
HTML code:-
<h1 class="animated fadeInUp" >Example</h1>
CSS code:-
.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;
}
Author by
NewKidOnTheBlock
Updated on June 13, 2022Comments
-
NewKidOnTheBlock almost 2 years
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 here however 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.
/** 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 **/
$(".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 **/
.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); }