Как добавить быстрое появление и исчезновение CSS-анимации

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

Похоже, вам нужны три позиции анимации вместо двух:

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 2

  .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%.

Answer 3

Я думаю, это то, что вы ищете.Я увеличил продолжительность анимации, чтобы сделать затухание более заметным.В основном вам нужно поиграть с процентными значениями в анимации, поэтому переход от белого к другому цвету не происходит в течение 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>