I got a bug on using animation-timing-function in safari after updated to iOS 14.
Before iOS 14, animation-timing-function is used to control the speed of the properties (likes top, left, opacity). But now it seems to control the timing. Below is the example :
.div{
animation: my-ani 10s ease-out;
}
@keyframes my-ani {
0%, 30% {
left:0px
}
100% {
left:100px
}
}
In the past (browsers except for safari in iOS 14), the animation starts at 3s and moving to 100px with the speed of ease-out in 7 seconds. But in safari 14, it will start before 3s (I don't know the exact time) with a linear speed in more than 7 seconds. Does anyone know what is the reason for this issue? Thanks.