CSS3 转换在 chrome 上不起作用

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