CSS 动画在 Safari 中无法正常工作

Question

我的动画在 Chrome 和 Firefox 中都有效，但在 Safari 中无效，我不明白为什么。我同时使用 -webkit-animation 和简单的 animation 函数，但它拒绝在 Safari 中工作。我的CSS如下：

.bar{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: 0;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  background: #7CE1C9;
  height: 30px;

  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 1.8s;
  animation: bar-before-two 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
@keyframes bar-before-two {
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

我只是停滞不前，有什么想法吗？

Answer 1

动画中有两个名字 bar-before 和 bar-before-two 前缀不正确，我想你可以将它们合并为一个 - 即 progress-bar。否则单独设置它们。

-webkit-animation: progress-bar 1.8s;
animation: progress-bar 1.8s;

@-webkit-keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
@keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.bar{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: 0;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  background: #7CE1C9;
  height: 30px;
  display: block;
  width: 100%;
  -webkit-animation: progress-bar 1.8s;
  animation: progress-bar 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@-webkit-keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
@keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

<div class="bar">bar</div>

CSS 动画在 Safari 中无法正常工作

CSS animation not working properly in Safari

css

css-animations