Question

我有问题让这个边框动画在其他浏览器（IE）上工作。 http://babarogic.disclosed.site检查实时预览或摘录。有很多搜索这个问题，但没有一个对我有用。也许我在某个地方犯了错误。

谢谢

＆＃13;

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; }
}

＆＃13;

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

＆＃13;

Answer 1

如果你在动画帧中加入一些顺序，它可以在IE11上运行：

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

检查结果here。

According to MDN，IE11正在做正确的事：放弃重复的关键帧只采用最新的。

如果关键帧被多次定义但并非全部受影响属性在每个关键帧中，只有在中指定的值考虑最新的关键帧。

边界动画线性渐变垂直运动

1 个答案: