Question

我有一个适用于Firefox和IE11的简单代码，但它不适用于Chrome。这是一个简单的div，当页面加载时，它必须'淡入'，'点击'必须'淡出'。
这是代码：
HTML

<div class="BoxContainer">    
      <div class="Box " id="Box1">
        <div class="LargeTile Tile Tile_SKY">
            <div class="BoxTitle">
                Search
            </div>
        </div>
    </div>
</div>

CSS

.BoxContainer{
    position:relative;
    margin:auto;
    margin-top:15%;
    width: 100%;
    height: 100%;
}
.Box{
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1;
    perspective: 1000;
}
#Box1
{
    top:10px;
    left:0px;
}
.Tile_SKY{
    background:#2a7fed url('imgs/tiles/sky.png');
    border:2px solid #4399f1;
}
.LargeTile{
    position:absolute;
    text-align:center;
    width: 200px;
    height: 200px;
}
.LargeTile .BoxTitle{
    font-size:15px;
    font-family:Tahoma;
    color:#fff;
    position: absolute;
    left: 10px;
    bottom: 5px;
}
.LargeTile .TileImage{

    width: 45%;
    height: 45%;
    margin: 25% auto;
}
.fadeOutback{
 animation: fadeOutback 0.3s ease-out 1 normal forwards;
}
.fadeInForward{
  /*remember: in the second animation u have to set the final values reached by the first one*/
  opacity:0;
  transform: translateZ(-5em) scale(0.75);
  animation: fadeInForward .25s cubic-bezier(.03,.93,.43,.77) .2s normal forwards;
}
@keyframes fadeOutback{
  0% {transform: translateX(-2em) scale(1); opacity:1;}
  70% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  95% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  100% {transform: translateZ(-5em) scale(0); opacity:0;}
}
@keyframes fadeInForward{
  0% {transform: translateZ(-5em) scale(0); opacity:0;}
  100% {transform: translateZ(0) scale(1); opacity:1;}
}

的jQuery

$(document).ready(function(){
    $('#Box1').addClass('fadeInForward').removeClass('fadeOutback');
    $('.Tile').on('click',function(){
    $('#Box1').removeClass('fadeInForward').addClass('fadeOutback'); 
    });
});

fiddle link

Answer 1

您需要在转换，动画，关键帧等上使用供应商前缀。这是您的示例的更新版本，它使用带有供应商前缀的关键帧。

的 JSFiddle

@keyframes fadeOutback{ 0% {transform: translateX(-2em) scale(1); opacity:1;} 70% {transform: translateZ(-5em) scale(0.6); opacity:0.5;} 95% {transform: translateZ(-5em) scale(0.6); opacity:0.5;} 100% {transform: translateZ(-5em) scale(0); opacity:0;} } @-webkit-keyframes fadeOutback{ 0% {-webkit-transform: translateX(-2em) scale(1); opacity:1;} 70% {-webkit-transform: translateZ(-5em) scale(0.6); opacity:0.5;} 95% {-webkit-transform: translateZ(-5em) scale(0.6); opacity:0.5;} 100% {-webkit-transform: translateZ(-5em) scale(0); opacity:0;} } @keyframes fadeInForward{ 0% {transform: translateZ(-5em) scale(0); opacity:0;} 100% {transform: translateZ(0) scale(1); opacity:1;} } @-webkit-keyframes fadeInForward{ 0% {-webkit-transform: translateZ(-5em) scale(0); opacity:0;} 100% {-webkit-transform: translateZ(0) scale(1); opacity:1;} }

我还分解了你的例子并制作了一个使用转换而不是关键帧的类似版本。对动画的控制力稍差，但它可能是一个更清晰的解决方案。

的 JSFiddle

HTML

<div class="container"> <div id="box1" class="box hidden"> <span class="box-title">Search</span> </div> </div>

CSS

body { margin: 0; padding: 0; } .box-title { font-size: 15px; font-family: Tahoma; color: #fff; position: absolute; left: 10px; bottom: 10px; } .box { -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; width: 200px; height: 200px; border:2px solid #4399f1; background: #2a7fed; display: block; } .box.hidden { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }

JS

$('#box1').removeClass('hidden'); $('#box1').on('click',function(){ $('#box1').addClass('hidden'); });

Answer 2

您是否有理由同时使用Jquery和CSS3？如果您打算使用JS，您可以使用它来非常简单地淡入淡出盒子。

在CSS中将#Box1设置为display: none;，然后添加以下JS：

$(document).ready(function(){

    $('#Box1').delay(1000).fadeIn("slow");

    $('.Tile').click(function(){
        $('#Box1').fadeOut();
    });
});

这会在页面加载时淡入#Box1，当您点击淡出时。

更新我添加了淡入淡出的延迟，因为它发生得太快了。我更新了上面的JS和新的小提琴：

JSFiddle

CSS3转换不适用于chrome

2 个答案: