Question

“如何为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;
  }

<li class="section-1"></li>

任何帮助都会很棒，欢呼声

Answer 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>

Answer 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更多的时间来执行过渡。

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

<li class="section-1"></li>

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

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

3 个答案: