Question 332355 in CSS Question posted in
Some basic documentation can be found here.

Safari CSS Sweep Animation Effect Not Working

Background:

So I’ve read a bunch of different articles and stack overflows on CSS3 Animations not working on Safari, etc. I’ve attempted several of those examples such as adding the prefix -webkit- making keyframes 0% to 100%, and even transform:translate3d(0,0,0) to trigger hardware acceleration. I’ve even tried adding a delay as someone suggested but is not in the current JSFiddle. Nothing has worked so far but I am sure it’s a minor thing I am missing.

Question

CSS Animations are not my strong suit but any reason why my circle is jumping to the end of the keyframes vs showing a sweeping effect across the bar in an infinite animation on my iPhone Safari/WKWebView? It works on my Windows device with Chrome/Edge.

Code

// CSS
@-webkit-keyframes ios-sweep-test {
0% {
    cx: 5;
}

100% {
    cx: 100%;
}
}

@keyframes sweep {
from {
    cx: 5;
}

to {
    cx: 100%;
}
}

circle {
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-name: sweep;
animation-iteration-count: infinite;
animation-direction: alternate;
transform:translate3d(0, 0, 0)

-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: ios-sweep-test;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-transform: translate3d(0, 0, 0);
}

// HTML
<svg width="100%" height="20px">
                    <g transform="translate(0,10)">
                        <rect width="100%" height="2" y="-1" x="0" stroke="green" />
                        <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
                    </g>
                </svg>

JSFiddle

https://jsfiddle.net/2btz19qL/2/

Image

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In order to get the sweeping animation to transition properly in my example for Safari browser and mobile device I was able to do the following.

    1. I removed all the -webkit prefixes, they were not needed
    2. I removed the transform:translate3d(0,0,0). Probably didn't have to do this but determined it was not needed.
    3. The winning item, in the keyframes change both cx: values to percentages.

    https://jsfiddle.net/1hys3rqb/

    @keyframes sweep {
from {
    cx: 0%;
}

to {
    cx: 100%;
}
}

circle {
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-name: sweep;
animation-iteration-count: infinite;
animation-direction: alternate;
}

  2. 0

    Two things I changed to make it work in Safari:

    • transform:translate3d(0, 0, 0) is missing a ; which produces a CSS error
    • animation-name: sweep; is in the top section, but -webkit-animation-name: ios-sweep-test; was set in the lower section, causing the animation to not work at all.
    @keyframes sweep {
  from { cx: 5; }
  to { cx: 100%; }
}

circle {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-name: sweep;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform:translate3d(0, 0, 0);

  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: sweep;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-transform: translate3d(0, 0, 0);
}
    <svg width="100%" height="20px">
    <g transform="translate(0,10)">
        <rect width="100%" height="2" y="-1" x="0" stroke="green" />
        <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
    </g>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search