Any idea why this easing-function is not working?

user_5895938 0
Viewed 219

I'm using the cubic-bezier(0.34, 1.56, 0.64, 1) function in my CSS which should give the effect demonstrated here, which it does in Chrome and Firefox, however, the easing function doesn't work as expected on IOS, no "bouncing back" effect can be observed.

Any idea why is this happening? Thanks.

UPDATE: The behavior has been observed with the transform property.

animation css
2 Answers

I would love to see the code implementation as well to help you debug your problem. My CSS animations are not working in iOS - Someone wrote on how to fix CSS animation for the iOS. You might be able to see what can you improve in your code.

user_143417280

Well after some experimentation, I've found the following:

  • Webkit doesn't produce the "bouncing" effect with certain properties, of which one is the transform property. However, The easing function works well with offset-properties(top, left, right, and bottom)
  • Blink, on the other hand, produces the effect with both transform and offset-properties.
user_58959380
Related