Animate.CSS Transition无法在Mozila Firefox中运行

时间:2015-06-03 05:59:58

标签: javascript jquery html css firefox

尝试使用Animate.CSS仅滑动h3(不是整个滑块)bounceInLeft,但它仅适用于Chrome,Opera 但不适用于Firefox浏览器。

请参阅此Fiddle>在Chrome上,然后是Firefox。

CSS:

/******************
* Bounce in Left *
*******************/
@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-1000px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-1000px);
    }

    80% {
        -webkit-transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-1000px);
    }

    80% {
        -moz-transform: translateX(-10px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-1000px);
    }

    80% {
        -o-transform: translateX(-10px);
    }

    100% {
        -o-transform: translateX(0);
    }
}

.animated.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    -moz-animation-name: bounceInLeft;
    -o-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

/****************
* bounceInRight *
****************/
@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(1000px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(1000px);
    }

    80% {
        -webkit-transform: translateX(10px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(1000px);
    }

    80% {
        -moz-transform: translateX(10px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(1000px);
    }

    80% {
        -o-transform: translateX(10px);
    }

    100% {
        -o-transform: translateX(0);
    }
}

.animated.bounceInRight {
    -webkit-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    -o-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

/* Description */
#headslide p {
-webkit-animation-name:bounceInRight;
-moz-animation-name:bounceInRight;
-o-animation-name:bounceInRight;
animation-name:bounceInRight;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;

box-shadow:0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-o-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-ms-box-shadow:0 1px 4px rgba(0,0,0,0.1);

margin:0;
}

/* Title */
#headslide h3 {
-webkit-animation-name:bounceInLeft;
-moz-animation-name:bounceInLeft;
-o-animation-name:bounceInLeft;
animation-name:bounceInLeft;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;

background: #fff;
font-size: 110%;
line-height: 1.4;
padding: 1% 2%;
margin: 0;
font-weight:normal;
text-transform:uppercase;
}

默认情况下,此Slider具有淡入淡出过渡,因此它显示Firefox上的淡入淡出过渡,而我的bounceInLeft/bounceInRight关键帧仅适用于Chrome和Opera。
我只是试图滑动h3,而不是整个滑块。

为什么Animate.css无法在Firefox上运行?我怎样才能解决这个问题?
是否可以使用jQuery解决这个问题?感谢。

0 个答案:

没有答案