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
  • 10,010
  • 26
  • 106
  • 195

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
  • 7,924
  • 2
  • 14
  • 38
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,038
  • 2
  • 19
  • 42