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中无法正常工作

1 个答案: