暂停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

你想要达到这样的目标吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;