CSS3动画/关键帧，在IE11问题中用vw转换

Question

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

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

因此，我创建了小提琴采取的是定位在viewport的中心元素：

1. 在屏幕的左边缘与出现
2. 移动到元素 的一半启动它视口的中心，暂停
3. ，然后移动到视口的右边缘，其中一半的元件关闭屏幕的

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

• 在网站上我的工作，IE11动画元素作为更广泛的
• 在拨弄如果 页面分别为10倍，动画反向运行 永不它对页面的边缘。

因此，在这两种情况下，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：

在IE 10和11中，使用VW单位3D变换的原因意外行为

虽然3D变换不同，但很可能它们是在浏览器中使用simliar方法处理的。所以我会说在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>

Answer 2

你可以试试这个CSS。另一种解决方案可以在没有IE11问题的情况下获得相同结果希望它会有所帮助。

* { 
     margin: 0; 
     padding: 0; 
    } 

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

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

    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; 
     overflow: hidden; 
    } 

    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 3

一个可能性是将变换用作百分比。

由于您希望变换的量为100vw，因此可以设置宽度为100vw的额外元素。现在，这个元素的转换只是100％。

我不得不使用负偏移，以避免不期望的水平滚动条

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

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

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

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

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

 
.base { 
 
    width: 100vw; 
 
    animation: movee 5.0s linear infinite 0.0s; 
 
    top: 50%; 
 
    position: absolute; 
 
    height: 100px; 
 
} 
 
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; 
 
    right: 0px; 
 
    top: 0px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    margin: -50px 0 0 -50px; 
 
}

<article> 
 
    <p>IE11 weirdness when transforming vw inside keyframes</p> 
 
    <div class="base"> 
 
    <strong><span>BLOCK</span></strong> 
 
    </div> 
 
</article>