Keyframe Animation Back To Initial State

I did a slow infinite CSS3 animation. It animates from top:0; to top:40px;. The error is when the animate ends, it jumps to the start point. I think it should jump with easeor ease

Solution 1:

This is just an alternative solution

Just add alternate ant the end of animation.

span {
  margin-left: 200px;
}
/** Down Slow Animation **/@-webkit-keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
@-moz-keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
@keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
.down-slow {
  position: relative;
  -webkit-animation: downSlow 1.5s infinite alternate;
  -moz-animation: downSlow 1.5s infinite alternate;
  animation: downSlow 1.5s infinite alternate;
}

<linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet" /><spanclass="down-slow"><iclass="fa fa-angle-down fa-5x"></i></span>

The same code can be reduce to

span {
  margin-left: 200px;
  top: 0px;
}

@-webkit-keyframes downSlow {
  to { top: 40px; }
}
@-moz-keyframes downSlow {
  to { top: 40px; }
}
@keyframes downSlow {
  to { top: 40px; }
}
.down-slow {
  position: relative;
  
  -webkit-animation: downSlow 1.5s infinite alternate;
  -moz-animation: downSlow 1.5s infinite alternate;
  animation: downSlow 1.5s infinite alternate;
}

<linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet" /><spanclass="down-slow"><iclass="fa fa-angle-down fa-5x"></i></span>

A much better approach would be to use translate this way your element will not interfere with other DOM elements

span {
  margin-left: 200px;
}

@-webkit-keyframes downSlow {
  to { transform: translateY(40px) }
}
@-moz-keyframes downSlow {
  to { transform: translateY(40px) }
}
@keyframes downSlow {
  to { transform: translateY(40px) }
}
.down-slow {
  position: relative;

  -webkit-animation: downSlow 1.5s infinite alternate;
  -moz-animation: downSlow 1.5s infinite alternate;
  animation: downSlow 1.5s infinite alternate;
}

<linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet" /><spanclass="down-slow"><iclass="fa fa-angle-down fa-5x"></i></span>

But again you can reduce this with prefixfree frind a cdn here

span {
  margin-left: 200px;
}

@keyframes downSlow {
  to { transform: translateY(40px) }
}
.down-slow {
  position: relative;
  animation: downSlow 1.5s infinite alternate;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"  /><spanclass="down-slow"><iclass="fa fa-angle-down fa-5x"></i></span>

at the end set speed/2

span {
  margin-left: 200px;
}

@keyframes downSlow {
  to { transform: translateY(40px) }
}
.down-slow {
  position: relative;
  animation: downSlow .7s infinite alternate forwards;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"  /><spanclass="down-slow"><iclass="fa fa-angle-down fa-5x"></i></span>

REF: animation-fill-mode