CSS动画淡入暂停....淡出 [英] CSS Animation Fade In pause.... Fade Out

问题描述

我正在尝试使一些(将是图像)块在暂停中淡出几秒钟，然后淡出....

I’m trying to get some (will be images) blocks to fade in pause for a few seconds and then fade out....

到目前为止，我已经了解了它，但是它似乎并不想消失，我不确定我要去哪里错了.

I’ve got it so far but it doesn’t seem to want to stay faded out and i’m unsure where i’m going wrong.

淡出后，再次显示.

我有一个小提琴，它非常基本地显示了它.

I have a fiddle which shows it very basicly.

/* 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;
   }

推荐答案

使用单个动画...

*{
  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>

这篇关于CSS动画淡入暂停....淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！