部分iphone机型无法实现css的animation动画效果(无效, 失效)

在开发过程中, 需要写一个年报页面, 其中需要一个字体向上移动和逐显的效果. 测试时发现逐显效果都可以实现, 但是向上移动的效果安卓机型可以实现, 部分iphone机型失效. 后来实现过程中发现, 只要把动画效果的结果写在调用动效的class上就好了.

<div class="css-an">嘿嘿嘿, 我是动效~</div>

<style>
	.css-an{
		position: absolute;
        left:0;
        right:0;
        bottom:75px;
        animation: .8s linear .5s 1 normal both running ani;
	}
	@keyframes ani{
        from {position: absolute;left:0;right:0;bottom:60px;}
        to {position: absolute;left:0;right:0;bottom:75px;} // to是css动效的结束样式, 把结果加成到.css-an中
        // 以下是逐显样式
        0%{  opacity:0; }
        100%{ opacity:1; }
    }
</style>