CSS关键帧动画边框问题

Question

我正在尝试平滑地制作一些 css 三 Angular 形的动画，我有这个:

但没有任何反应 - 谁能给我指出正确的方向。

感谢:

    .angle-1 {
        position: absolute; bottom: 0;
        width: 0; height: 0;
        border-style: solid;
        border-width: 200px 0 0 1440px;
        border-color: transparent transparent transparent #007bff;
        opacity: 0.7;
        -webkit-animation: moveangle1 2s infinite;
        -moz-animation: moveangle1 2s infinite;
        -o-animation: moveangle1 2s infinite;
        animation: moveangle1 2s infinite;
    }
        @keyframes moveangle1,
        @-o-keyframes moveangle1,
        @-moz-keyframes moveangle1,
        @-webkit-keyframes moveangle1 {
            0%   { border-width: 200px 0 0 1440px; opacity: 0.7; }
            100% { border-width: 400px 0 0 1000px; opacity: 0.4; }
        }

这是一个例子:https://jsfiddle.net/sp2emgtc/

Answer 1

您不能将带有供应商前缀的关键帧语句组合成一个规则。

必须单独说明。

.angle-1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 0 0 1440px;
  border-color: transparent transparent transparent #007bff;
  opacity: 0.7;
  -webkit-animation: moveangle1 2s infinite;
  animation: moveangle1 2s infinite;
}
@-webkit-keyframes moveangle1 {
  0% {
    border-width: 200px 0 0 1440px;
    opacity: 0.7;
  }
  100% {
    border-width: 400px 0 0 1000px;
    opacity: 0.4;
  }
}
@keyframes moveangle1 {
  0% {
    border-width: 200px 0 0 1440px;
    opacity: 0.7;
  }
  100% {
    border-width: 400px 0 0 1000px;
    opacity: 0.4;
  }
}

<div class="angle-1">

</div>