html - 边框动画线性渐变垂直移动

Question

我无法在其他浏览器 (IE) 上运行此边框动画。 http://babarogic.disclosed.site检查实时预览或片段。对这个问题进行了大量搜索，但没有一个对我有用。也许我在某个地方犯了错误。

谢谢

body {
background-color: black;
}
.border-main {
    position: fixed;
    right: 0%;
    left: 0%;
    top: 0%;
    bottom: 0%;
    width: 75%;
  /* 90% of viewport vidth */
  height: 60%;
  /* ratio = 9/16 * 90 = 50.625 */
  max-height: 70vh;
  max-width: 140vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
    overflow: hidden;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 9;
    pointer-events: none;
    -webkit-animation: clipMe 8s linear infinite;
            animation: clipMe 8s linear infinite;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 100%, 0 0, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(bottom, white, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(bottom, white, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      -webkit-gradient(linear, left bottom, left top, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
    border-image:
      linear-gradient(to top, white, rgba(0, 0, 0, 0)) 1 100%;
    
}

@-webkit-keyframes clipMe {
  0%    { height: 0%; }
  100%  { height: 60%; }
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes clipMe {
  0%    { height: 0%; }
  100%  { height: 60%; }
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

<div class="border-main"></div>

Answer 1

如果您在动画帧中放置一些顺序，它可以在 IE11 上运行:

@keyframes clipMe {
  0%    { height: 0%; opacity: 0; }
  50%   { opacity: 1; }
  100%  { height: 60%; opacity: 0; }
}

查看结果here .

According to MDN , IE11 做对了:丢弃重复的关键帧，只取最新的。

If a keyframe is defined multiple times but not all affected properties are in each keyframe, only the values specified in the latest keyframe are considered.