CSS3动画/关键帧,在IE11问题中使用vw进行转换

Question

我在屏幕上制作一个元素,但在IE11中,奇怪的事情正在发生.我正在开发中,所以我无法分享实时代码.但我创造了一个小提琴来复制这个问题.

基本上,当我使用视口宽度又名vw与transform:translateX();内部的@keyframes到在动画中使用,IE11不反映的宽度viewport在动画.

所以我创建的小提琴取一个位于以下位置中心的元素viewport:

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

小提琴:https://jsfiddle.net/Bushwazi/7xe0wy8z/4/

• 在我正在研究的网站中,IE11将该元素设置为动画,就像页面宽10倍一样
• 在小提琴中,动画反向运行,永远不会到达页面边缘.

因此,在这两种情况下,IE11都没有使用正确的vwCSS动画内部宽度.

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：

在 IE 10 和 11 中，使用带有 3D 变换的 vw 单位会导致意外行为

尽管 2D 和 3D 变换不同，但它们很可能在浏览器中通过类似的方法进行处理。所以我想说 IE11 不支持 VW/VH/VMAX/VMIN 过渡。

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

像这样：

* {
  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>