随着css3的流行，现在很多可以使用css3实现的动画效果，基本上就选择css3实现，尤其是在移动端的（移动端对css3的支持度相对比较高，PC端有很多IE8及以下的浏览器拖着后腿呢）。
最近做了一个app活动页面，避嫌就不上页面设计图了，其中有一块是这样的：
一个3月份日历，每天可以点击领取一种奖励（就直接称之为奖励吧），每到新的一天，都要有明显提示，今天是第一次进入当前页面，有奖励可以领取。
我们的设计方案：当天可点击的提示是通过边框不停的闪动实现。通过js获取当天的日期，匹配日历当中的日期，为其添加一个class，从而实现提示可点击状态。
.calendar-table td.onActive:before{
-webkit-animation: borderchg 1s infinite ease-in;
animation: borderchg 1s infinite ease-in;
}
下面就涉及到animation动画的编写了，事实上这个动画很简单，就是使用内阴影模拟的边框，从无到有，再逐渐消失的过程。
@keyframes borderchg {
100% {
-webkit-box-shadow: inset 0 0 1px 3px #ef4444;
box-shadow: inset 0 0 1px 3px #ef4444;
}
}
工作到这里算是完成了，效果也基本实现了，剩下的就是后面的流程，后台开发，测试，上线的工作了。
可是临到快上线的时候，后台开发人员拿着一款三星的手机，过来跟我说，这个三星手机上没有当天可点击的提示。
翻css，没有找到问题根源，想着就这一款三星的手机，就算了，直接无视他。
晚上上线之后，突然发现，凡是ios8的系统的iPhone手机，也没有这个当天可点击的提示。这就比较坑了，不可能无视这么多的iPhone手机啊。怎么办？
第一想法是换解决方案，可能是box-shadow的问题（然而我并不能确认），反正是html和css的问题，所以换解决方案并不算麻烦，然后我就重新设计了一下当天可点击的提示，通过径向渐变的背景色不断闪现的效果来提示。
@keyframes borderchg {
100% {
background-image: -webkit-radial-gradient(farthest-corner, rgba(239, 68, 68, 0.8), transparent);
background-image: radial-gradient(farthest-corner, rgba(239, 68, 68, 0.8), transparent);
}
}
浏览器测试没有问题，然后继续线上替换css，发现在ios8系统的iPhone上依然一样，没有提示。
这会真的是懵逼了，不知所措。
后来去网上搜索了一下别人写的css3的animation动画，发现我一直忽视了的一点：keyframes关键帧。
这个也是css3的新添加的，所以很多人在写keyframes的时候，也像其他属性一样添加了前缀-webkit-，此时才想到keyframes是不是应该也有兼容性问题。
ios8 Supported width prefix:-webkit-。就这么个东西，折腾了一个多小时，其实就是思维局限了。
最终还是采用原方案：
@-webkit-keyframes borderchg {
100% {
-webkit-box-shadow: inset 0 0 1px 3px #ef4444;
box-shadow: inset 0 0 1px 3px #ef4444;
}
}
总算是闹明白问题在哪了，还是兼容性问题，只不过是一直被我潜意识忽略了的keframes的兼容性问题。