Question

我正在尝试平滑动画一些css三角形，我有这个：

但没有任何事情发生 - 请有人指出我正确的方向。

谢谢：

    .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

您无法将供应商前缀关键帧语句组合到单个规则中。

必须单独说明。

＆＃13;

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

＆＃13;

<div class="angle-1">

</div>

＆＃13;

CSS关键帧动画边框问题

1 个答案: