css3 pause anmation when completed

[UK-1991]

Hello,

Just created a website and want some animations so i used keframe animation in order to do so on 1 row I made an animation for the portfolio to scroll up and stop right there but it goes again at the starting point like
1 to 100 once on 100 it jumps back again to 1

I want to pause animation once it is on 100

.active .port_up_row {
  animation-duration: 3s;
  animation-name: slideup;
  -webkit-animation: slideup 5s ; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
     position: relative;
}
#section4 .row {
    overflow:hidden
}
@keyframes slideup {
  from {
    margin-top: 0%;
  }

  to {
    margin-top: -40%;
  }
}

[Aeonix]

Try animation-iteration-count: 1; ?

http://www.w3schools.com/css/css3_animations.asp

[gentlemedia]

You'll need to add animation-fill-mode: forwards;
So the shorthand version would be this, but 5s speed and 5s delay might take way too long :)

.active .port_up_row {
    -webkit-animation: slideup 5s 5s forwards;
    animation: slideup 5s 5s forwards;
}

On a side not. Consider using prefixfree.js, so that alll you need to write is the W3C standard property and the vendor prefix properties gets added automatically.