CODEWITHSUNDEEP
htmlcssanimationcss-animations
fxrxh
fxrxh

Reputation: 153

TImed Animation

How can I have the animation playing only for 5 seconds then it fades out?

Here is the sample from codepen

The 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);
}

Upvotes: 0

Views: 73

Answers (1)

ekans
ekans

Reputation: 1724

You just have to adjust the css and the animation : 

@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);
}

here the code pen http://codepen.io/anon/pen/gpRRVy

hope I help

Upvotes: 2

Related Questions