Pausing a css3 keyframe animation

Question

I have two patterns. I would like show them in this order

1) fade in pattern 1
2) fade in pattern 2
3) fade out pattern 1
4) fade out pattern 2

and then repeat indefinitely.

I have this, which shows the correct order, but does not pause the pattern, while the other fades in.

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

Is it possible to introduce a pause?

Answer 1

are you trying to achieve something like this?

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