TImed动画

Question

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

以下是codepen

的示例

CSS

@import "compass/css3";

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

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

.bounce {
  @include animation(bounce 2s infinite);
}

Answer 1

你只需要调整css和动画：

@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

希望我能帮忙