Question

尝试修复 Mozila firefox 的CSS3过渡，它在 Chrome和Opera 中完美运行，但在 Mozila firefox 35.0.1中无效+ 。我还在CSS上应用了-moz-keyframes。

CSS：

/******************
* Bounce in Left *
*******************/
@-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);
    }
}

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

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

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

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

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

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

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

    100% {
        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;
}

HTML：

<div id="headslide">
<ul>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#"><img src="wallpaper.jpg" height="260" width="350"/></a>
</div>
<span class="content-margin">
<p>Description on top.</p>
<h3><a href="#">Title on bottom</a></h3>
</span>
</li>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#"><img src="picture.jpg" height="260" width="350"/></a>
</div>
<span class="content-margin">
<p>Description on top.</p>
<h3><a href="#">Title on bottom</a></h3>
</span>
</li>
</ul>
<div class="pager"></div>
</div>

有两种类型效果bounceInLeft（应用于底部的标题）和bounceInRight（应用于顶部的描述）。在Chrome上，它的工作完美但不适用于Mozila firefox。这个Slider默认情况下有淡入淡出过渡，所以它在firefox上显示淡入淡出过渡，而我的bounceInLeft / bounceInRight关键帧仅适用于Chrome，Opera。

如何解决这个问题？

请参阅此Fiddle＆gt;＆gt;在 Mozila firefox 35.0.1 + 以及最新的Chrome上。感谢。

CSS Transition不仅适用于Mozila firefox浏览器

0 个答案: