Приостановка анимации ключевого кадра 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>