css动画在移动端的兼容

css动画在移动端的兼容

作为一名web前端新人，因为入职现在的公司一个月，在其中的项目也单独完成，其中对于css动画的处理，在移动端兼容的问题，在项目中也有深刻的理解。在苹果手机中的兼容添加前缀-webkit-，项目中的留资页面的下坠，使用中在苹果手机中遇见，动画执行完成之后才显示出来的问题，主要是对动画没有添加兼容性，再添加了兼容性后还是相同的效果，原因是在动画的起始位置过大，以至动画只能看到后20%，动画的起始位置的控制，在移动端中，分情况使用px，rem。px是固定数值，rem是相对于根元素；

在个中浏览器中的前缀添加：

-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */

附上项目图片

项目中的动画代码片段：@keyframes diaoluo {
0% {
       -webkit-transform: translateY(-11rem);
transform: translateY(-11rem)
}
60% {
       opacity: 1;
       -webkit-transform: translateY(-1rem);
       transform: translateY(-1rem)
   }
75% {
opacity: 1;
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem)
}
90% {
opacity: 1;
-webkit-transform: translateY(-0.25rem);
transform: translateY(-0.25rem)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}