CSS3 animation/keyframes, transforming with vw in IE11 问题

Question

我在屏幕上为一个元素设置动画，但在 IE11 中，发生了奇怪的事情。 我正在开发中，因此无法共享实时代码。但我创建了一个 fiddle 来重现该问题。

基本上，当我在 @keyframes 中将视口(viewport)宽度又名 vw 与 transform:translateX(); 一起用于动画时， IE11 不反射(reflect)动画中 viewport 的宽度。

因此，我创建的 Fiddle 采用位于 viewport 中心的元素:

1. 在屏幕的左边缘开始，元素的一半出现
2. 移动到视口(viewport)的中心，暂停
3. 然后移动到视口(viewport)的右边缘，一半的元素离开屏幕

fiddle :https://jsfiddle.net/Bushwazi/7xe0wy8z/4/

• 在我正在处理的网站中，IE11 对元素进行动画处理，就好像页面宽 10 倍
• 在 fiddle 中，动画反向运行永远不会到达页面的边缘。

所以在这两种情况下，IE11 都没有为 CSS 动画中的 vw 使用正确的宽度。

HTML:

<!--
  The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <strong><span>BLOCK</span></strong>
</article>

CSS:

* {
  margin: 0;
  padding: 0;
}

@-webkit-keyframes movee {
  0% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  10% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  40% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  60% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  90% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
  100% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
}

@keyframes movee {
  0% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  10% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  40% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  60% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  90% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
  100% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
}

body {
  background-color: #eee;
  background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  font-family: sans-serif;
  height: 100vh;
}

article {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
  -webkit-animation: movee 5.0s linear infinite 0.0s;
          animation: movee 5.0s linear infinite 0.0s;
}

Answer 1

根据 caniuse :

In IE 10 and 11, using vw units with 3D transforms causes unexpected behavior

虽然 2D 和 3D 变换不同，但它们很可能在浏览器中由类似的方法处理。所以我会说 VW/VH/VMAX/VMIN 在 IE11 中不支持转换。

你有什么理由不想使用 % 吗？

像这样:

* {
  margin: 0;
  padding: 0;
}

@-webkit-keyframes movee {
  0% {
    left: -1%;
  }
  10% {
    left: -1%;
  }
  40% {
   left: 50%;
  }
  60% {
    left: 50%;
  }
  90% {
    left: 101%;
  }
  100% {
   left: 101%;
  }
}

@keyframes movee {
  0% {
    left: -1%;
  }
  10% {
    left: -1%;
  }
  40% {
   left: 50%;
  }
  60% {
    left: 50%;
  }
  90% {
    left: 101%;
  }
  100% {
   left: 101%;
  }
}

body {
  background-color: #eee;
  background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  font-family: sans-serif;
  height: 100vh;
}

article {
  border: thin dotted green;
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
  -webkit-animation: movee 5.0s linear infinite 0.0s;
          animation: movee 5.0s linear infinite 0.0s;
}

<!--
  The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <strong><span>BLOCK</span></strong>
</article>