He hecho intentos para crear una animación CSS, al pasar el cursor sobre el cuadro, que revela el div con CSS animaciones. He utilizado el siguiente sitio como referencia. haga clic aquí sin embargo, me parece que no puede lograr el efx. En mi sitio tengo uso de JqUERY para mostrar y ocultar la función, mi addClass y RemoveClass funciona sin embargo en general la función no está funcionando como debería hacer. Alguien puede guiarme en la dirección correcta.

/** 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");
            }); 

/** ANIMACIÓN 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);
}

2 Comentarios

  1. 0

    Trate de usar las clases css que usted ha proporcionado, y pasar un segundo parámetro a la «addClass» llamada indicando el número de milisegundos que debe animar. Por ejemplo:

    $(".trigger").hover(function(){
    var $this = $(this);
    $this.next(".overlay").addClass("fadeInDown", 1000);
    }); 
  2. 0

    Añadir la siguiente css y HTML de la etiqueta .

    Código HTML:-

    <h1 class="animated fadeInUp" >Example</h1>

    Código 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;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here