iOS Safari Transition Transform Not Working

IOS Safari transition transform not working

Old versions of iOS Safari support only vendor-prefixed properties and values for transition and transform, so you should use -webkit-transition: -webkit-transform instead -webkit-transition: transform:

JSFiddle

$('button').on('click', function() {    $('.mydiv').toggleClass('added-class');});

.mydiv {    display: inline-block;    width: 100px;    height: 50px;    background-color: red;
    -webkit-transform: translateY(0);    -moz-transform: translateY(0);    -ms-transform: translateY(0);    -o-transform: translateY(0);    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.6s ease-out;    -moz-transition: transform 0.6s ease-out;    -o-transition: transform 0.6s ease-out;    transition: transform 0.6s ease-out;}
.added-class {    -webkit-transform: translateY(100%);    -moz-transform: translateY(100%);    -ms-transform: translateY(100%);    -o-transform: translateY(100%);    transform: translateY(100%);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv"></div><button type="button">Toggle class</button>

Transitions not working on iOS safari - tried all the different suffix

The transition setting needs to be applied to the default state of the element, not the "to-be-transitioned" state (in your case obviously :active).

css transition not working in mobile chrome

Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb

css transition not working in mobile chrome

Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb

CSS3 Transition + Transform not working in Safari, but working in Chrome

Vendor prefix has to be at property not at value, so:

-o-transform: scale(1,1);

CSS transform and transition not working in Safari

Transform and transition don't work on safari and chrome without browser perfix that is webkit for safari so use:

-webkit-transform and -webkit-transition instead...

transform: translate animation not functioning on iOS 15.1 devices

We worked it out in class tutorial today.

The answer was because of how I was zooming into the picture.
I was using width, and increasing from 100% to 3000%.

I should have been using scale within the transform before the translate method.

I will leave in the -webkit versions for isurance.

*{
background-color:orange;
}
#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 {
  z-index: index 100;;
  width: 100%;
  background: pink;
  transform-origin: center;
  -webkit-transform-origin: center;
  animation-name: dinoAttack;
  animation-timing-function: cubic-bezier(.59,.15,1,-0.15);
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
@keyframes dinoAttack {
  0% {
    left: 0px;
    transform: scale(1.0) translate3D(0, 0, 0);
    -webkit-transform: scale(1.0) translate3D(0, 0, 0);
    -moz-transform: scale(1.0) translate3D(0, 0, 0);
  }
  90% {    
    left: 0px;
    transform: scale(5.0) translate3D(-30%, -4%, 0);
    -webkit-transform: scale(5.0) translate3D(-30%, -4%, 0);
    -moz-transform: scale(5.0) translate3D(-30%, -4%, 0);
  }
  100% {    
    left: 0px;   
    transform: scale(5.0) translate3D(-30%, 25%, 0);
    -webkit-transform: scale(5.0) translate3D(-30%, 25%, 0);
    -moz-transform: scale(5.0) translate3D(-30%, 25%, 0);
  } 
}

<div id="divNV2">
  <a href="https://scottsigler.com/library/#post-1154">
    <img id="novellasBanner" alt="Tie-In Novellas" src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg">
  </a>
</div>

---

Related Topics