what is the other way to do css animation

Question

I am using @keyframes to apply the animation on progress bar but it is causing issues with iphone 5s. What is happening is in iphone 5s when i try to scroll the data in window it doesnt scroll the window but scrolls the page behind it. so when i commented this code that doesnt happen. so trying to see if there is any other way to do this.

@keyframes loadbar {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(0) translate3d(0, 0, 0);
  }
}

.progressBar--progress {
  opacity: 0;
  transform: translateX(-100%) translate3d(0, 0, 0);
}

Are you sure it's the `keyframes` and not the `translate3d`? See [this answer](https://stackoverflow.com/a/18529444/5369466) — Nathan Hinchey, Oct 11 '17 at 15:51
For help on how to do this without using `@keyframes` please include a little more of your code so we can see what you're actually doing with it. — Nathan Hinchey, Oct 11 '17 at 15:54
@NathanHinchey i tried to make changes in the link you have above but it still shows the scrolls the page in behind but it does scroll a bit on window. — Nicholas james, Oct 11 '17 at 16:20
Oh, sorry, I was only linking that because it's where I learned that translate3d forces weird stuff on older devices -- I don't actually know the solution. Why are you including it here? — Nathan Hinchey, Oct 11 '17 at 16:22
@NathanHinchey you are right. the issue was translate3d. i removed it and its working now. Please add it as an answer and i'll mark it as answer — Nicholas james, Oct 12 '17 at 01:46

score 0 · Accepted Answer · answered Oct 12 '17 at 14:48

0

translate3d animations have issues on iOS. Try removing translate3d(0,0,0).

Related information: https://origin-discussions-us.apple.com/thread/6762081

answered Oct 12 '17 at 14:48

Nathan Hinchey

1,191
9
30

what is the other way to do css animation

1 Answers1