在设置

Question

我有下面的css类和关键帧来动画淡化图像并从左侧滑入。

转换在桌面上运行得很好但是在移动设备上，转换就像完全显示100％关键帧一样，然后转换从0％开始，并按照您的预期执行动画。

我尝试将0％样式添加到原始类，以便在动画开始之前将其启动到正确的位置，但这不起作用。有任何想法吗？谢谢！

.slideLeft {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-name: slideInLeft;
  transform: translate3d(-100%, 0, 0);
	opacity: 0;
	visibility: visible;
}


@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
        visibility: visible;

    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        visibility: visible;
    }
}

<img src="http://content.mycutegraphics.com/graphics/food/whole-pizza.png" class="slideLeft"/>

Answer 1

＆＃13;

＆＃13;

img{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-name: slideInLeft;
  transform: translate3d(-100%, 0, 0);
	visibility: visible;
}


@keyframes slideInLeft {
    9% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;

    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
       
    }
}

＆＃13;

<img height="70" src="https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg">

＆＃13;

＆＃13;

＆＃13;

Answer 2

我道歉，看起来这个问题并不完全与css相关。这是我在构建页面后引入的一个项目，我发现有一个javascript在项目滚动到视图时会向项目附加一个.start类，这将触发转换。修复是我最初的想法，将0％的关键帧值添加到类中，以便它们在转换开始之前从正确的位置开始。我只需要跟踪所有与.start转换关联的类并添加关键帧值。