0

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%;
  }
}
3
Contributors
2
Replies
34
Views
1 Year
Discussion Span
Last Post by gentlemedia
0

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.

Edited by gentlemedia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.