css3 - CSS keyframe-mobile starts at 100% before animating -


i have css class , keyframes below animate image fading in , sliding in left.

the transition works fine on desktop on mobile device, transition acts complete displaying 100% keyframe first, transition begins @ 0% , performs animation expect.

i tried adding 0% style original class start out @ correct position before animation begins didn't work. ideas? thanks!

.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"/>

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;               }  }
<img height="70" src="https://pbs.twimg.com/profile_images/828213014599839749/vgv8lt6t.jpg">


Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -