css3动画旋转不兼容ios

最新推荐文章于 2023-04-23 09:19:56 发布

原创最新推荐文章于 2023-04-23 09:19:56 发布 · 992 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画 #css

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用CSS3定义动画，重点讲解了如何为元素添加旋转动画并确保在iOS设备上的兼容性，同时提及了关键帧动画的设置和动画应用时的初始值设置。通过`-webkit-`前缀和动画填充模式`forwards`来确保跨平台效果。

1、定义动画，不仅写上前缀，还要加上初始状态

@keyframes rotateLeft{
0%{
  transform: translateY(-100%) rotateZ(0deg);
  -moz-transform: translateY(-100%) rotateZ(0deg);
   -o-transform: translateY(-100%) rotateZ(0deg);
   -webkit-transform: translateY(-100%) rotateZ(0deg)
}
100%{
  transform: translateY(0%) rotateZ(720deg);
  -moz-transform: translateY(0%) rotateZ(720deg);
  -o-transform: translateY(0%) rotateZ(720deg);
  -webkit-transform: translateY(0%) rotateZ(720deg);
}

2、使用动画的时候也加上初始值

> div {
    width: 65px;
    height: 110px;
    opacity: 0;
    margin: 0 5px;
&.rotateTwo{
 opacity: 1;
  -webkit-transform: translateY(-100%) rotateZ(0deg);
  animation:rotateLeft 3s;
  -moz-animation:rotateLeft 3s;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
   }

这样就兼容ios啦