CSS 动画淡入暂停....淡出

Question

我正在尝试让一些(将是图像) block 淡入暂停几秒钟然后淡出....

到目前为止我已经知道了，但它似乎不想保持淡出状态，我不确定我哪里出错了。

在它淡出之后又再次出现。

我有一个 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>