Question

根据我的环境，以下动画要么对齐（图表的颜色在动画期间不会改变），要么完全关闭。

我怀疑这是因为我开始了多个动画并且他们在不同的时间开始。

你如何调整动画/强迫它们同时开始？ + 我需要更改关键帧中的一些值而不实际设置它们的动画（在这种情况下，颜色） - 因此，我创建了几个0.99％的步骤并将它们转换为下一个完整数字 - 这是正确的方法吗？

@keyframes swinging {
  0%{
    transform: rotate(-65deg);
    opacity: 0;
    transform-origin: center bottom;
  }
  0.01%{
    transform: rotate(-65deg);
    opacity: 1;
    transform-origin: center bottom;
  }
  30%{
    opacity: 1;
    transform: rotate(0);
    transform-origin: center bottom;
  }
  99.99%{
    opacity: 1;
    transform: rotate(0);
    transform-origin: center bottom;
  }
  100% {
    opacity: 0;
    transform-origin: center bottom;
  }
}
@keyframes changeContent{
    0%{
      color: #fbd977;
      content: "\f1fe";
  }
  19.99% {
    content: '\f1fe';
    color: #fbd977;
  }
    20.00%{
      color: #ed9286;
      content: "\f201";
    }
  39.99% {
      content: "\f201";
    color: #ed9286;
  }
    40.00%{
      color: #d992bc;
      content: '\f200';
    }
  59.99% {
      content: '\f200';
    color: #d992bc;
  }
    60.00%{
      color: #84bbe6;
      content: '\f080';
    }
  79.99% {
       color: #84bbe6;
      content: '\f080';
  }
    80.00%{
      color: #aed292;
      content: '\f0ce';
    }
  99.99% {
      color: #aed292;
      content: '\f0ce';
  }
}

.fa:before {
            animation: changeContent calc(15s/3) infinite;
}

.fa {
  font-size: 5em!important;
 animation: swinging calc(3s/3) cubic-bezier(0,2,.58,1) forwards infinite;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="loading">
  <span class="foo fa-fw fa fa-area-chart"></span>
</div>

Answer 1

我可能会将它们合并到一个动画中，您可以轻松管理而不会出现任何同步问题。

@keyframes changeContent {
  0% {
    color: #fbd977;
    content: "\f1fe";
    transform: rotate(15deg);
  }
  5% {
    transform: rotate(0deg);
  }
  19.99% {
    content: '\f1fe';
    color: #fbd977;
    transform: rotate(0deg);
  }
  20.00% {
    color: #ed9286;
    content: "\f201";
    transform: rotate(15deg);
  }
  25% {
    transform: rotate(0deg);
  }
  39.99% {
    content: "\f201";
    color: #ed9286;
    transform: rotate(0deg);
  }
  40.00% {
    color: #d992bc;
    content: '\f200';
    transform: rotate(15deg);
  }
  45% {
    transform: rotate(0deg);
  }
  59.99% {
    content: '\f200';
    color: #d992bc;
    transform: rotate(0deg);
  }
  60.00% {
    color: #84bbe6;
    content: '\f080';
    transform: rotate(15deg);
  }
  65% {
    transform: rotate(0deg);
  }
  79.99% {
    color: #84bbe6;
    content: '\f080';
    transform: rotate(0deg);
  }
  80.00% {
    color: #aed292;
    content: '\f0ce';
    transform: rotate(15deg);
  }
  85% {
    transform: rotate(0deg);
  }
  99.99% {
    color: #aed292;
    content: '\f0ce';
    transform: rotate(0deg);
  }
}

.fa:before {
  animation: changeContent 10s infinite;
  display:inline-block; /* Don't forget this to be able to use transform */
  transform-origin: center bottom;
}

.fa {
  font-size: 5em!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="loading">
  <span class="foo fa-fw fa fa-area-chart"></span>
</div>

同时拥有多个动画CSS3

1 个答案: