html vw自动跳到ie,CSS3动画/关键帧,在IE11问题中使用vw进行转换
我在屏幕上制作一個元素,但在IE11中,奇怪的事情正在發生.我正在開發中,所以我無法分享實時代碼.但我創造了一個小提琴來復制這個問題.
基本上,當我使用視口寬度aka vw與transform：translateX();在要在動畫中使用的@keyframes中,IE11不會反映動畫中視口的寬度.
所以我創建的小提琴取一個位于視口中心的元素：
>使用元素的一半在屏幕的左邊緣開始
出現
>移動到視口的中心,暫停
>然后移動到視口的右邊緣,一半元素離開屏幕
>在我正在開發的網站中,IE11將元素設置為動畫效果
頁面寬10倍
>在小提琴中,動畫反向運行
并且永遠不會到達頁面的邊緣.
所以在這兩種情況下,IE11都沒有在CSS動畫中使用正確的vw寬度.
HTML：
IE11 weirdness when transforming vw inside keyframes
BLOCK
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;
}
總結
以上是生活随笔為你收集整理的html vw自动跳到ie,CSS3动画/关键帧,在IE11问题中使用vw进行转换的全部內容，希望文章能夠幫你解決所遇到的問題。
