Hello. There was a problem point in the use of animation. On the desktop, everything works as it should, but when you load the page on the iPhone, the effect works, and then the block disappears until you turn the screen. What is the reason and how to cope?

HTML

<img class="bounceIn" src="https://img.joinfo.ua/i/2017/04/150x117/58ef934331486.jpg">

CSS

 .bounceIn { animation: bounceIn 2s ease-in; -webkit-animation: bounceIn 2s ease-in; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: scale3d(1, 1, 1); } }
  • 2
    try adding -webkit prefix - jsfiddle.net/99vt8xta - soledar10
  • Oh, right! Vendor prefixes, forgot about them. Thank you @ soledar10 to you very much! - Alla

0