Question

我正在制作html5照片演示文稿。该演示文稿在每张幻灯片上有11张幻灯片和3-8个不同的动画元素。演示页面在http://frontrend.ru/test/for-iframe.html

首先，我使用 margin 属性制作了所有动画。但他们在IOS上并不顺利。然后我将其更改为翻译动画，这些动画在桌面上播放完美，但在IOS上从一个州跳到另一个状态。

例如第一张幻灯片的动画：

@keyframes bottom-top-slow {
  0% {
    transform: translate(0, 100%);
  }
  40% {
    transform: translate(0, 0);
  }
  80% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}

#prst_s1_1_layer {
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s;
  }
}

#prst_s1_2_layer {  
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .05s;
  }
}

#prst_s1_t1_layer {  
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .1s;
  }
}

#prst_s1_t2_layer {   
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .15s;
  }
}

#prst_s1_3_layer {   
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .2s;
  }
}

#prst_s1_4_layer {   
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .2s;
  }
}

#prst_s1_t3_layer {   
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .25s;
  }
}

#prst_s1_5_layer {   
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .3s;
  }
}

#prst_s1_logo_layer {   
  transform: translate(0, 100%);
  .state-1 & {
    animation: bottom-top-slow 4.5s .35s;
  }
}

所有元素都跳转到transform: translate(0, 0);而没有转换。

UPD 所有元素都具有相对于父级转换的类层。

.prst_layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

CSS转换动画跳转而不转换IOS

0 个答案: