Question

如何让动画只播放5秒然后淡出？

以下是示例JSFIDDLE：

CSS

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}

Answer 1

试试这个代码......

@import "compass/css3";

@include keyframes(bounce) {
    0%, 10%, 20%, 30%, 40%, 60%, 70%, 80% {
    @include transform(translateY(0));
  }
    15%, 65% {
    @include transform(translateY(-30px));
  }
    25%,75% {
    @include transform(translateY(-15px));
  }
  80%{
    opacity: 1;
  }
  100%{
     opacity: 0;
  }
  0%{
    opacity: 1;
  }
}


body {
  background: black;
}

.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;
  opacity: 0;
}

.bounce {
  @include animation(bounce 5s);
}

以下是有助于更清楚地了解的有用链接： - http://codepen.io/anon/pen/gpRRVy

Answer 2

#animated-example {
  margin: 40px auto;
  width: 100px;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
  text-align: center;
  padding: 20px;
}
.animated {
  -webkit-animation-name: bounceIn;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 5;
  -webkit-animation-fill-mode: forwards;
  animation-name: bounceIn;
  animation-duration: 4s;
  animation-iteration-count: 5;
  animation-fill-mode: forwards;
}
/*
 * Animation for webkit
*/

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
/*
 * Adding the animation to our element
*/

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
.fadeOutDiv {
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*animation-delay*/
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -ms-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s;
  /*animation-duration*/
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  /*animation-iteration-count*/
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  /*animation-name*/
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-ms-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="fadeOutDiv">
  <div style="background-color:#D32F2F;" id="animated-example" class="animated bounce">I'm Bouncing!</div>
</div>

嗯，因为css非常有限，我们必须做淡出动画在另一个 div 上，如下所示：

HTML代码：

<div class="fadeOutDiv">
<div style="background-color:#D32F2F;" id="animated-example" class="animated bounce">I'm Bouncing!</div>
</div>

在代码旁边的css中，您需要的是添加淡出动画风格和animation-delay:15s;您需要设置延迟秒多于动画按钮持续时间的秒数，例如if 你想要动画按钮每次5秒左右上下3次 3 * 5 = 15所以你需要设置延迟超过15秒，如同代码如下：

Css代码：

#animated-example {
    margin:40px auto;
    width:100px;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
            text-align: center;
            padding: 20px;
    }


.animated { 
    -webkit-animation-name: bounceIn;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 5;
    -webkit-animation-fill-mode: forwards;

    animation-name: bounceIn;
    animation-duration: 4s;
    animation-iteration-count: 5;
    animation-fill-mode: forwards;
} 

/*
 * Animation for webkit
*/
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

/*
 * Adding the animation to our element
*/
.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}

.fadeOutDiv{
  -webkit-animation-fill-mode:forwards;
     -moz-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
       -o-animation-fill-mode:forwards;
          animation-fill-mode:forwards;

  /*animation-delay*/
  -webkit-animation-delay:15s;
     -moz-animation-delay:15s;
      -ms-animation-delay:15s;
       -o-animation-delay:15s;
          animation-delay:15s;

    /*animation-duration*/
    -webkit-animation-duration:1s;
       -moz-animation-duration:1s;
        -ms-animation-duration:1s;
         -o-animation-duration:1s;
            animation-duration:1s;

  /*animation-iteration-count*/
  -webkit-animation-iteration-count:1;
     -moz-animation-iteration-count:1;
      -ms-animation-iteration-count:1;
       -o-animation-iteration-count:1;
          animation-iteration-count:1;

  /*animation-name*/
  -webkit-animation-name:fadeIn;
     -moz-animation-name:fadeIn;
      -ms-animation-name:fadeIn;
       -o-animation-name:fadeIn;
          animation-name:fadeIn;
}

 @-moz-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;} 
    }

    @-webkit-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;}
    }

     @-ms-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;}
    }

 @-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;}
    }

您可以使用 / 动画持续时间 / 和 / 动画延迟 / 如您所愿。如果您有任何疑问，请与我们联系。

上下＆amp;淡出动画

2 个答案: