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 {
@keyframes slideup {
  from {
    margin-top: 0%;

  to {
    margin-top: -40%;

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.