如何为 CSS 动画添加快速淡入淡出答案

【问题标题】：How to add a quick fade in and out to CSS animation如何为 CSS 动画添加快速淡入淡出
【发布时间】：2018-11-20 23:24:26
【问题描述】：

“我怎样才能”为 CSS 动画添加快速淡入淡出？

.section-1 {
  -webkit-animation: my-animation 1.3s infinite;
  /* Safari 4+ */
  -moz-animation: my-animation 1.3s infinite;
  /* Fx 5+ */
  -o-animation: my-animation 1.3s infinite;
  /* Opera 12+ */
  animation: my-animation 1.3s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes my-animation {
  0%,
  49% {
    background-color: white;
  }
  50%,
  100% {
    background-color: #8b72da;
  }

&lt;li class="section-1"&gt;&lt;/li&gt;

任何帮助都会很棒，干杯

【问题讨论】：

然后使用0% {} 50% {}
如果您设法提出一个实际问题，那也很棒。（“我想要”不是一个。）
@misorude 您匹配您的用户名 ;-) 感谢您的提示！ :-/
在前面添加“我该怎么做”也不是一个合适的问题。说明您迄今为止研究过的内容，并展示您尝试过的内容。
@missorude，我认为那里有足够的信息可以发布，研究就在那里，还有一个例子。你还想要什么？与其挑剔事物，不如尝试提供更多帮助并消除文本中的态度。

标签： html css animation

【解决方案1】：

我想这就是你要找的。我增加了动画的持续时间以使淡入淡出更加明显。基本上你必须在动画中使用百分比值，所以从白色到另一种颜色的过渡不会在动画持续时间的 1% 内发生：

.section-flash-ul {
  list-style: none;
  width: 100%;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.section-flash-item {
  border: 1px solid black;
  width: 33.333%;
  height: 10px;
  display: inline-block;
  padding: 0;
  margin: 0;
  }
.section-1 {
/*   width: 50px;
  height: 50px; */
 -webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
    background-color: white;
}
50%, 80% {
    background-color: #8b72da;
}
}

.section-2 {
/*   width: 50px;
  height: 50px; */
 -webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
    background-color: white;
}
50%, 80% {
    background-color: #9d89de;
}
}

.section-3 {
/*   width: 50px;
  height: 50px; */
 -webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
    background-color: white;
}
50%, 80% {
    background-color: #b5a8e0;
}
}

<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>




<div class="quadrat">

</div>

【讨论】：

【解决方案2】：

似乎您需要三个动画位置而不是两个：

animation: my-animation 1.3s infinite;

@-webkit-keyframes my-animation {
0% {
    background-color: white;
}
50% {
    background-color: #8b72da;
}
100% {
    background-color: white;
}

请注意，在您的示例中，您的 css 将背景从 0 到 49% 保持为白色，然后将纯色从 50% 保持到 100%。如果您想要更平滑的效果，请在这些状态之间给 css 更多时间来执行转换。

【讨论】：

【解决方案3】：

  .section-1 {
  -webkit-animation: my-animation 1.3s infinite;
  /* Safari 4+ */
  -moz-animation: my-animation 1.3s infinite;
  /* Fx 5+ */
  -o-animation: my-animation 1.3s infinite;
  /* Opera 12+ */
  animation: my-animation 1.3s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes my-animation {
  0% {
    background-color: white;
  }
  50% {
    background-color: #8b72da;
  }

&lt;li class="section-1"&gt;&lt;/li&gt;

我不知道你在哪里找到使用关键帧的方法，但从 0% 到 50% 就足够了。

【讨论】：