前两个问题由
spec回答.
循环:animation-iteration-count:无限;
循环背景颜色涉及指定@keyframes规则.
body { background: #0ff; }
@-webkit-keyframes blink {
0% { background: rgba(255,0.5); }
50% { background: rgba(255,0); }
100% { background: rgba(255,0.5); }
}
@keyframes blink {
0% { background: rgba(255,0.5); }
}
#animate {
height: 100px;
width: 100px;
background: rgba(255,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;
}
(不要忘记任何适用的供应商前缀!)
至于浏览器支持,我无法告诉你具体细节,但无论如何我会建议通过modernizr和Javascript后备功能检测.
这是一个在webkit中工作的example,至少满足您的一些要求.注意:我不使用mac,所以我不确定你引用的效果的细节.