CSS Анимация Fade In паузы .... Fade Out

Question

Я пытаюсь получить некоторые (будет изображения) блоки, чтобы исчезнуть в режиме паузы в течение нескольких секунд, а затем исчезать ....

Я получил его до сих пор, но он, похоже, не хочет оставаться в тени, и я не знаю, где я ошибаюсь.

После того, как он исчез, он снова появляется.

У меня есть fiddle, который показывает это очень основательно.

/* Defines the animation keyframes */ 
@-webkit-keyframes fadein { 
0% { 
    opacity: 0; 
} 

72% { 
    opacity: 0; 
} 

100% { 
    opacity: 1; 
} 
} 
@-moz-keyframes fadein { 
    0% { 
     opacity: 0; 
    } 

    72% { 
     opacity: 0; 
    } 

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

    72% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 

} 


/* Defines the animation keyframes */ 
@-webkit-keyframes fadeOut { 
0% { 
    opacity: 1; 
} 

72% { 
    opacity: 0; 
} 

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

    72% { 
     opacity: 0; 
    } 

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

    72% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 0; 
    } 

} 

.get{ 
    -webkit-animation: fadein 1.9s ease-in-out 0s 1, 
    fadeOut 1.9s ease-in-out 5s 1 ; 
-moz-animation: fadein 1.9s ease-in-out 0s 1, 
    fadeOut 1.9s ease-in-out 5s 1 ; 
    animation: fadein 1.9s ease-in-out 0s 1, 
    fadeOut 1.9s ease-in-out 5s 1 ; 

    background-color:red; 
} 



.give{ 
    -webkit-animation: fadein 2.8s ease-in-out both 0s 1, 
    fadeOut 1.9s ease-in-out 8s 1 ; ; 
    -moz-animation: fadein 2.8s ease-in-out both 0s 1, 
    fadeOut 1.9s ease-in-out 8s 1 ; 
    animation: fadein 2.8s ease-in-out both 0s 1, 
    fadeOut 1.9s ease-in-out 8s 1 ; 
    background-color:green; 
    } 

Answer 1

Использовать одну анимацию ...

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.block{ 
 

 
    width:100px; 
 
    height:100px 
 
    display:block; 
 
    height:100px; 
 
} 
 

 

 
@keyframes fadein { 
 
    0%, 100% { 
 
    opacity: 0; 
 
    } 
 

 
    72% { 
 
    opacity: 1; 
 
    } 
 

 
} 
 

 
.get{ 
 
    opacity: 0; 
 
    animation: fadein 2s ease-in-out 0s 1; 
 
    background-color:red; 
 
} 
 

 

 

 
.give{ 
 
    opacity: 0; 
 
    animation: fadein 3s ease-in-out both 1s 1; 
 
    background-color:green; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div class="block get">Get</div> 
 
<div class="block give">Give</div>