スタッフブログ

IE11の作業メモです。
端から端まで動かすという次のようなアニメーションをCSSのtransformで作成したところIE11で正しく動かないという症状が発生。

  .car {
    animation: carMove 10s ease-in-out alternate infinite;
  }

  @keyframes carMove {
    0% {
      transform: translateX(-100px);
    }

    100% {
      transform: translateX(110vw);
    }
  }

どうやら110vwの数値が想定より大きく取られているようです。
確認したところvwの値を%にするとよさそうでした。

.carクラス`にIE用の記述を準備して解決。

  .car {
    animation: carMove 10s ease-in-out alternate infinite;

  + [data-browser="ie"] &{
  +  animation: carMoveIe 10s ease-in-out alternate infinite;
  + }
  }

  @keyframes carMove {
    0% {
      transform: translateX(-100px);
    }

    100% {
     transform: translateX(110vw);
    }
  }

   @keyframes carMoveIe {
    0% {
      transform: translateX(-100px);
    }

    100% {
      transform: translateX(110%);
    }
  }

IE11のサポート状況
https://caniuse.com/#feat=viewport-units
https://caniuse.com/#search=translateX

---