Member Avatar for 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%;
  }
}
  • 3 Contributors
  • 2 Replies
  • 350 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

— the behaviour described is normal: CSS animations revert to the element's original computed style when they finish unless told otherwise. was right to call out a single run, and was right about keeping the final frame. Combine those ideas and avoid mixing conflicting prefixed shorthand/longhand declarations.

A concise, robust approach is to run the animation once and keep the end state. Also prefer transforms for smoother, GPU-accelerated motion rather than animating layout properties like margin-top.

Example (CSS-only, explicit and consistent):

.active .port_up_row {
  animation: slideup 0.8s ease-out 0.2s 1 forwards;
  -webkit-animation: slideup 0.8s ease-out 0.2s 1 forwards;
}

/* use transform instead of margin-top */
@keyframes slideup {
  from { transform: translateY(0); }
  to   { transform: translateY(-40%); }
}
@-webkit-keyframes slideup {
  from { -webkit-transform: translateY(0); }
  to   { -webkit-transform: translateY(-40%); }
}

If the layout needs explicit final values or a fallback for browsers that mis-handle fill modes, handle the end with JavaScript (listen for the animation end and lock the final state):

const el = document.querySelector('.active .port_up_row');
if (el) {
  const done = () => {
    el.classList.add('animation-stopped'); // CSS sets final transform/animation:none
    el.removeEventListener('animationend', done);
    el.removeEventListener('webkitAnimationEnd', done);
  };
  el.addEventListener('animationend', done);
  el.addEventListener('webkitAnimationEnd', done);
}

Troubleshooting checklist: keep prefixed and unprefixed declarations consistent (shorthand can override longhand), ensure the container has overflow:hidden (already present in the thread), test in devtools to confirm the computed animation properties, and prefer transform-based keyframes for better performance.

Recommended Answers

All 2 Replies

Member Avatar for 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.

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.