CSS: 去除边缘/即动画

Question

不足为奇的是，缩放效果在 ms edge 浏览器中看起来很糟糕。有没有办法为边缘禁用这一切？

.jumbotron__bg {
 -webkit-animation-name: animateBg;
 animation-name: animateBg;
 -ms-animation-name: none;

 animation-duration: 18000ms;
 animation-fill-mode: both;

 animation-timing-function: cubic-bezier(.3,0,.7,1);
 animation-iteration-count: 1;
}


@keyframes animateBg {
  from {
  transform: scale(1.05, 1.05);
  -ms-transform: scale(1,1);
 }

 to {
 transform: scale(1, 1);
 -ms-transform: scale(1,1);
 }
}

（即可以，不适用于边缘）

Answer 1

您可以将 @supports 与只有 Edge 支持的属性一起使用；

这适用于 Edge 12 及更高版本（所有版本）：

@supports (-ms-ime-align: auto) {
     .jumbotron__bg {
         animation-name: none;
     }
}

~或~

这仅适用于 v13 及更高版本的 Edge

@supports (-ms-accelerator:true) {
     .jumbotron__bg {
         animation-name: none;
     }
}

CSS: 去除边缘/即动画

CSS: remove edge / ie animations

css

microsoft-edge