css动画animation-keyframes

随着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的兼容性问题。　　

 

　

 

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/6437188.html