4

I am trying to slide down a div element. SO I just use: 

$("#myBox").addClass("moveDown");

.moveDown {
    animation:mymove 1s ease-out forwards;
    -webkit-animation:mymove 1s ease-out infinite;
}
@keyframes mymove { 
    from {top:0px; opacity: 0;}
    to {top:100px; opacity: 1}
}

@-webkit-keyframes mymove {
    from {top:0px; opacity: 0;}
    to {top:100px; opacity: 1;}
}

that works fine: my Box moves smoothly 100px to bottom but when animation has ended, it jumps to its initial position: Any idea on how to achieve that ?

I don't want to use jquery's animate function because it is not smooth enough with jquery.

yarek
  • 11,278
  • 30
  • 120
  • 219

2 Answers2

4

In order to keep the last key frame will need add the following lines in your .movedown class

-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-moz-animation-fill-mode: forwards
-ms-animation-fill-mode: forwards

example

.moveDown {
 animation:mymove 1s ease-out forwards;
 -webkit-animation:mymove 1s ease-out infinite;
 -webkit-animation-fill-mode: forwards
 animation-fill-mode: forwards
 -moz-animation-fill-mode: forwards
 -ms-animation-fill-mode: forwards
repzero
  • 8,254
  • 2
  • 18
  • 40
3

An easy way would be to use CSS transitions instead of CSS animations:

#myBox {
  top: 0;
  opacity: 0;
  transition: all 1s;
}
#myBox.moveDown {
  top: 100px;
  opacity: 1;
}

Works with the same jQuery you've written.

Sean
  • 6,873
  • 4
  • 21
  • 46