FF/ChromeでのjQueryによる行列変換のCSS3遷移

Question

私は、ページの読み込み時にウィンドウブラインドのオープニングのようなコンテンツを表示する必要がある簡単な小さなトランジションアニメーションを作成しました。トランジション値を設定するためにcss3とページロード時に変換：マトリックス値に変更を適用するjQueryの組み合わせを使用します。 Safariではうまく動作しますが、私の人生では、FFやChromeでトランジション効果が働かない理由を理解できません。これらの両方のブラウザでは、「ブラインド」が消えて、4つの縦のストリップに移動するのではなく、トランジションの表示後にコンテンツが表示されます。

https://jsfiddle.net/ebenezer66/783uh6k3/

：

以下のコードを、私はまた、これは、ここでフィドル（これは、私はSafariで作品を言うように、あなたは私が期待してい効果のようなものを見ることができるように）で入れています基本的なHTML：

<div class="home__columnShades__div"> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnOne"></div> 
    </div> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnTwo"></div> 
    </div> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnThree"></div> 
    </div> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnFour"></div> 
    </div> 
</div> 

SCSS：

.home__columnShades__div { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 899; 
} 

.home__columnShades__div__column { 
    width: 25%; 
    height: 100%; 
    float: left; 
} 

.home__columnShades__div__columnOne { 
    position: absolute; 
    left: 0; 
    height: 100%; 
    width: inherit; 
    background-color: #000; 
    transition: transform 3s; 
    transition-delay: 0.5s; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: top left; 
} 

.home__columnShades__div__columnTwo { 
    @extend .home__columnShades__div__columnOne; 
    left: 25%; 
} 

.home__columnShades__div__columnThree { 
    @extend .home__columnShades__div__columnOne; 
    left: 50%; 
} 

.home__columnShades__div__columnFour { 
    @extend .home__columnShades__div__columnOne; 
    left: 75%; 
} 

のjQuery：

var viewWidthQuarter = $(window).width()/4; 

    $('.home__columnShades__div__columnOne').css({ 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 
    $('.home__columnShades__div__columnTwo').css({ 
    'background-position': '-' + viewWidthQuarter + 'px' + ' 0', 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 
    $('.home__columnShades__div__columnThree').css({ 
    'background-position': '-' + viewWidthQuarter * 2 + 'px' + ' 0', 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 
    $('.home__columnShades__div__columnFour').css({ 
    'background-position': '-' + viewWidthQuarter * 3 + 'px' + ' 0', 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 

Answer 1

なぜ私は変換：行列（または変換）がFF/Chromeでは機能しないのですが、私はコードを修正して、各垂直ブラインドの左の位置にトランジションを使用するように修正しましたトランスフォームの変換値。それは実際には少し良く機能します - アニメーションは間違いなくスムーズです。

https://jsfiddle.net/ebenezer66/ttgp8bj4/

更新のjQuery：

var viewWidth = $(window).width(), 
    viewWidthQuarter = viewWidth/4; 

    $('.home__columnShades__div__columnOne').css({ 
    'left': viewWidth-(viewWidthQuarter*4.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 
    $('.home__columnShades__div__columnTwo').css({ 
    'background-position': '-' + viewWidthQuarter + 'px' + ' 0', 
    'left': viewWidth-(viewWidthQuarter*3.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 
    $('.home__columnShades__div__columnThree').css({ 
    'background-position': '-' + viewWidthQuarter * 2 + 'px' + ' 0', 
    'left': viewWidth-(viewWidthQuarter*2.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 
    $('.home__columnShades__div__columnFour').css({ 
    'background-position': '-' + viewWidthQuarter * 3 + 'px' + ' 0', 
    'left': viewWidth-(viewWidthQuarter*1.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 

更新CSS：私はちょうどscaleXプロパティに変換を実行場合

.home__columnShades__div { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 899; 
} 

.home__columnShades__div__column { 
    width: 25%; 
    height: 100%; 
    float: left; 
} 

.home__columnShades__div__columnOne { 
    position: absolute; 
    left: 0; 
    height: 100%; 
    width: inherit; 
    background-color: #000; 
    transition: transform 3s, left 3s; 
    transition-delay: 0.5s; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: top left; 
} 

.home__columnShades__div__columnTwo { 
    @extend .home__columnShades__div__columnOne; 
    left: 25%; 
} 

.home__columnShades__div__columnThree { 
    @extend .home__columnShades__div__columnOne; 
    left: 50%; 
} 

.home__columnShades__div__columnFour { 
    @extend .home__columnShades__div__columnOne; 
    left: 75%; 
}