CODEWITHSUNDEEP
ioscssanimationsafari
Oscar Godson
Oscar Godson

Reputation: 32776

Why doesn't this animation work in Safari (including iOS?)

I'm not even sure what else to try. I've even put it through a CSS validator and it passes. Works in Chrome and Firefox. Safari shows no warnings or errors that I can tell.

Relevant CSS:

.lines {
  width: 32px;
  margin: 20px auto;
}

.line-bar {
  display: inline-block;
  background-color: #f7f7f7;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  -webkit-animation: loading 1s ease-in-out infinite;
  animation: loading 1s ease-in-out infinite;
}

.line-bar:nth-child(1) {

}

.line-bar:nth-child(2) {
  -webkit-animation-delay: 0.09s;
  animation-delay: 0.09s;
}

.line-bar:nth-child(3) {
  -webkit-animation-delay: 0.18s;
  animation-delay: 0.18s;
}

.line-bar:nth-child(4) {
  -webkit-animation-delay: 0.27s;
  animation-delay: 0.27s;
}

@-webkit-keyframes loading {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1, 2.2);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes loading {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1, 2.2);
  }

  40% {
    transform: scale(1);
  }
}

http://jsbin.com/yobatuveji/1

Upvotes: 0

Views: 1027

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

You need to use webkit- vendor prefix also on the transform property

@-webkit-keyframes loading {
    0% {
        -webkit-transform: scale(1);
    }

    20% {
        -webkit-transform: scale(1, 2.2);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

Since these keyframes are introduced by the -webkit- prefix.
With this change the animation runs as expected also on Safari (just checked on v.7.1.2/MacOs).

Upvotes: 4

Related Questions