I have been playing around with CSS3 animations for my day job and so I thought I would apply one to PubCrawler. The location marker now pulses:
The CSS for this is incredibly simple:
.pulse_map_marker{
-webkit-animation: scale_map_marker 2s ease-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale_map_marker {
0%{-webkit-transform: scale(0.5);}
50%{-webkit-transform: scale(1);}
100%{-webkit-transform: scale(0.5);}
}
It basically scales the image down by half, then back to full size and back to half again over a 2 second period. The “ease-out” part smooths out all of the transitions. I originally tried a slightly different method:
.pulse_map_marker{
-webkit-animation: scale_map_marker 1s ease-out -1s alternate forwards;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale_map_marker {
from{-webkit-transform: scale(0.5);}
to{-webkit-transform: scale(1);}
}
Unfortunately, Android does not seem to like the use of the “from” and “to” clauses. Other Webkit browsers such as iOS and Chrome are fine with it. This is just one example of several inconsistencies in CSS3 compatibility between Webkit implementations.
ubikapps 