html – Transform: Translate animation on mobile (iOS) devices.

I’m trying to create an animation from a static image on a school project.

On my desktop, Chrome and Edge’s Inspect Mobile Simulator both show the animation as I intended.

But after I uploaded it to my GitHub, my mobile devices (iOS) are not following my transform: translate CSS code.

I’ve found some threads in Stackoverflow here that suggest using WebKit, but either I’m incorrectly adding my code, or something else is happening: https://stackoverflow.com/ questions / 54104578 / possible-to-convert-htmlcss-animationpng-extension-image-to-gif-extension-im CSS Transform not working on mobile

An animated GIF of the output “video”.

Left: iPad. Right: Desktop Inspect, iPad Simulator (using both Chrome: 96.0.4664.53 iOs, 96.0.4664.45 desktop.) Sorry for the inconvenience, too many frames had to be dropped to reach the size limit.

Enter image description here.

#divNV2 {
  width: 680px;
  height: 300px;
  display: flex;
  grid-area: nv2;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 2em;
  border: 2px black solid;
}

#novellasBanner {
  width: 100%;
  -webkit-animation-name: dinoWebkitAttack 8s cubic-bezier(.28, .03, 1, -0.07) infinite;
  animation-name: dinoAttack;
  animation-timing-function: cubic-bezier(.28, .03, 1, -0.07);
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

@-webkit-keyframes dinoWebkitAttack {
  0% {
    width: 100%
  }
  96% {
    width: 3000px;
    left: 0px;
    -webkit-transform: translate(-70%, -50%);
  }
  100% {
    width: 3000px;
    left: 0px;
    -webkit-tranform: translate(-70%, -35%);
  }
}

@keyframes dinoAttack {
  0% {
    width: 100%;
  }
  96% {
    width: 3000px;
    left: 0px;
    transform: translate(-70%, -50%);
    -webkit-transform: translate(-70%, -50%);
    -moz-transform: translate(-70%, -50%);
  }
  100% {
    width: 3000px;
    left: 0px;
    transform: translate(-70%, -35%);
    -webkit-transform: translate(-70%, -35%);
    -moz-transform: translate(-70%, -35%);
  }
}
<div id="divNV2">
  <a href="https://scottsigler.com/library/#post-1154">
    <img id="novellasBanner" alt="Tie-In Novellas" src="https://7jtjw222dqs33tthx34xsxi18iy-wpengine.netdna-ssl.com/wp-content/uploads/2016/11/RID-EB-680.jpg">
  </a>
</div>

<!--Note: link to the original image on author's website. Actual code has image locally hosted. Image is cropped to 300px height. <img id="novellasBanner" alt="Tie-In Novellas" src="images/RID-EB-680-680x300.jpg" >  -->

Write a Comment