The answers to the first two questions can be found in the CSS3 Animations specification.
To create a looping animation, use the
animation-iteration-count: infinite;
property.
You can cycle background colors by defining a @keyframes rule.
body { background: #0ff; }
@-webkit-keyframes blink {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
@keyframes blink {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
#animate {
height: 100px;
width: 100px;
background: rgba(255,0,0,1);
}
#animate {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;
animation-direction: normal;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-name: blink;
animation-timing-function: ease;
}
Remember to include vendor prefixes for cross-browser compatibility.
For browser support and fallback options, consider using Modernizr for feature detection and a JavaScript fallback.
Check out this example that works in WebKit browsers and meets some of your requirements. Note: I do not have a Mac, so I may not have captured the effect accurately.