Использование animation-fill-mode

by webref

HTML

<p>
  <span><strong>1.</strong> До анимации</span>
  <span><strong>2.</strong> В процессе анимации</span>
  <span><strong>3.</strong> После анимации</span>
</p>
<p><strong>none</strong>: стили анимации не влияют на стиль по умолчанию.</p>
<p>
  <span>Красный по умолчанию</span>
  <span>От синего к зелёному</span>
  <span>Обратно к красному</span>
</p>
<div class="none">
  <div></div>
</div>
<p><strong>forwards</strong>: последние стили, применяемые в конце анимации, сохраняются впоследствии.</p>
<p>
  <span>Красный по умолчанию</span>
  <span>От синего к зелёному</span>
  <span>Остаётся зелёным</span>
</p>
<div class="forwards">
  <div></div>
</div>
<p><strong>backwards</strong>: стили анимации будут применяться до того, как на самом деле начинается анимация.</p>
<p>
  <span>Уже синий</span>
  <span>От синего к зелёному</span>
  <span>Обратно к красному</span>
</p>
<div class="backwards">
  <div></div>
</div>
<p><strong>Both</strong>: стили применяются до и после воспроизведения анимации.</p>
<p>
  <span>Уже синий</span>
  <span>От синего к зелёному</span>
  <span>Остаётся зелёным</span>
</p>
<div class="both">
  <div></div>
</div>

CSS

p {
  color: grey;
  margin: 0;
  position: relative;
}

p:first-child {
  margin-bottom: 1rem;
}

p span {
  animation: toggle 6s infinite both;
  left: 0;
  position: absolute;
}

p:first-child span {
  animation-name: tabs;
  margin-right: 1rem;
  position: static;
}

p span:nth-child(1) {
  animation-delay: 0;
  position: static;
}

p span:nth-child(2) {
  animation-delay: 2s;
}

p span:nth-child(3) {
  animation-delay: 4s;
}

div {
  background: white;
  height: 20px;
  margin-bottom: 1rem;
  width: 220px;
}

div div {
  animation: race-none 6s linear infinite;
  background: crimson;
  height: 20px;
  margin-bottom: 0;
  position: relative;
  width: 20px;
}

div:nth-child(7) div {
  animation-name: race-forwards;
}

div:nth-child(10) div {
  animation-name: race-backwards;
}

div:nth-child(13) div {
  animation-name: race-both;
}

@keyframes tabs {
  0% {
    opacity: 0.2;
  }
  1% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  34% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes race-none {
  0% {
    background: crimson;
    left: 0;
  }
  33% {
    background: crimson;
    left: 0;
  }
  34% {
    background: midnightblue;
    left: 100px;
  }
  66% {
    background: mediumseagreen;
    left: 200px
  }
  67% {
    background: crimson;
    left: 0;
  }
  100% {
    background: crimson;
    left: 0;
  }
}

@keyframes race-forwards {
  0% {
    background: crimson;
    left: 0;
  }
  33% {
    background: crimson;
    left: 0;
  }
  34% {
    background: midnightblue;
    left: 100px;
  }
  66% {
    background: mediumseagreen;
    left: 200px
  }
  67% {
    background: mediumseagreen;
    left: 200px;
  }
  100% {
    background: mediumseagreen;
    left: 200px;
  }
}

@keyframes race-backwards {
  0% {
    background: midnightblue;
    left: 100px;
  }
  33% {
   ...