Animated Map Marker Not Working On Macs

[davvam]

Hi

I have created an animated map marker using a pulsate effect - www.cre8tivesource.co.uk/bluetown/animation-map.htm,

Only thing is when viewed on a MAC (Safari or Chrome) the animations do not work, I tried adding -webkit to the css but this still does not work eg

.bounce {
-webkit-animation-name: bounce;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 3s;
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 3s;
}

Could somebody please help get this to work when viewed in Safari or Chrome for MAC’s

Would really appreciate it.

Many Thanks

[PaulOB]

Hi,

There’s one element in chrome that pulsates as you seem to have only added the -webkit prefix to the first one. You need to add it to all the rest.

e.g.

Its missing from pulse2:after (and up to pulse 11:after). You need to add it to all of them like this:

.pulse-2:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
    
    -webkit-animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;

  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;

  opacity: 0;
  box-shadow: 0 0 1px 2px #0082c9;
 
  -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    
}

Also in your keyframes you only put the prefixed versions that match the @-webkit rule or -moz rules - don’t mix them.

Here you have missed the prefix from the 100% rule although you added it to the 0% rule.

  @-webkit-keyframes pulsate {
      0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0;
      }
    
      50% {
        opacity: 1;
      }
    
      100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
      }
    }

Here you have a moz keyframe filled with -webkit rules. Only -moz rules should be inside this:

@-moz-keyframes bounce {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px) rotate(-45deg);
  }

  80% {
   -webkit- transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
  }
}

There are also some animation rules that have no prefixes so make sure you add the webkit rule as well.

So go through your code and add the correct prefixes or if you are not sure you can use on one of the auto prefix tools found online.

[davvam]

OK, thanks Paul, thanks for your response

[PaulOB]

If it still doesn’t work then just shout and I will go through it again. The items were pulsating in chrome when I injected the code I mentioned above into your live page.