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
Post a Comment