css - 暂停 css3 关键帧动画

Question

我有两种模式。我想按这个顺序展示它们

1) 淡入模式 1
2) 淡入模式 2
3)淡出模式1
4) 淡出模式2

然后无限期地重复。

我有这个，它显示了正确的顺序，但不会暂停模式，而另一个会淡入。

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
 }

@keyframes fadeOut {
 0%   { opacity: 1; }
 100% { opacity: 0; }
}


.pattern-one  {
  animation: fadeIn 2s infinite alternate;
}

.pattern-two  {
  animation: fadeOut 2s infinite alternate;
}

是否可以引入暂停？

Answer 1

你想实现这样的目标吗？

@keyframes fadeIn {
  0%   { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 1; }
 }

@keyframes fadeOut {
  0%   { opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; }
  100% { opacity: 1; }
}


.pattern-one  {
  animation: fadeIn 4s infinite;
}

.pattern-two  {
  animation: fadeOut 4s infinite;
}
div{
  width:50px;
  height:50px;
  background-color: blue;
  margin:10px;
}

<div class="pattern-one"></div>
<div class="pattern-two"></div>