0

I'm trying to change CSS animation-duration with javascript in a react app. My solution works in mac os chrome but fails to update in mac os safari and iOS safari chrome.

I've tried adding webkit prefixes manually(using create react app which should auto-prefix already), changing animation with "animation" instead of "animation-duration" to no avail. Using the same code below to change other properties like "display" works. Is it because of browsers rendering react different?

document.getElementsByClassName("calendar")[0].lastChild.style.animationDuration = "4s";

.calendar {
  -webkit-transform: skewY(27deg) scale(0) !important;
  transform: skewY(27deg) scale(0) !important;
  animation-play-state: paused;
  opacity: 1;
  visibility: visible;

  &.active {
    @include transitionCubic();
    -webkit-transform: skewY(27deg) scale(2) !important;
    transform: skewY(27deg) scale(2) !important;
    animation-play-state: running;
  }
  &.remove {
    opacity: 0;
    visibility: hidden;
  }
}

.calendar span:last-child {
  transform-origin: 100% -1.5%;
  animation: 4s flip infinite ease;
}

Weird thing is if I change tabs in safari, the animation updates correctly. Inspecting the element shows the element with the correct value but the screen's animation doesn't change.

Eugene
  • 1
  • 2

1 Answers1

0

Found the answer here

I made 3 duplicate keyframes and added/removed them via 3 different classes

Eugene
  • 1
  • 2