在FF / Chrome上使用jQuery在CSS3上进行矩阵转换的过渡

Question

I've written a simple little transition animation that on page load should reveal the content a little like the opening of a window blind. It uses a combination of css3, to set the transition values, and jQuery to apply a change to the transform: matrix values on page load. It works fine in Safari, but for the life of me I can't grasp why the transition effect doesn't work on FF or Chrome. In both those browsers, the 'blind' just disappears to reveal the content after the transition display, rather than transitioning out in four vertical strips as it should.

Code below, I've also put this is a fiddle here (which, as I say works in Safari, so you can see the sort of effect I'm expecting):

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

The basic 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

Although I haven't solved why transform: matrix (or translate) won't work on FF/Chrome, I've reworked my code to use a transition on the left position of each vertical blind instead of transform's translate value. It actually even works a bit better - the animation is definitely smoother.

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

Updated 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)'
  });

Updated CSS:

.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%;
}