定时动画

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

希望能帮到你

定时动画

TImed Animation

html

css

animation

css-animations