在项目中需要在支付结果页面加入弹窗广告，并提供动画效果。在参考了animate.css后，将其中的bounceInDown和bounceOutUp提取出来，提取部分如下：

.animated {animation-duration: 1s;animation-fill-mode: both;
}@keyframes bounceInDown {from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);}to {transform: none;}
}.bounceInDown {animation-name: bounceInDown;
}@keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);}40%, 45% {opacity: 1;transform: translate3d(0, 20px, 0);}to {opacity: 0;transform: translate3d(0, -2000px, 0);}
}.bounceOutUp {animation-name: bounceOutUp;
}

使用方式：在需要动画的地方加上animate和相应的动画类即可，例如：

// 添加动画效果
$(".pop_ad_container").addClass("animated bounceInDown");

原始animate.css中的动画，并没有加入兼容性支持。所以针对不同的浏览器要做下兼容性支持：加上厂商前缀，然后将from,to更改为0%，100%：

.animated {animation-duration: 1s;animation-fill-mode: both;-moz-animation-duration: 1s;-moz-animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both;-o-animation-duration: 1s;-o-animation-fill-mode: both;
}@keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}@-webkit-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}@-moz-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}@-o-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}.bounceInDown {animation-name: bounceInDown;-webkit-animation-name: bounceInDown;-moz-animation-name: bounceInDown;-o-animation-name: bounceInDown;
}@keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}@-webkit-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}@-moz-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}@-o-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}.bounceOutUp {animation-name: bounceOutUp;-moz-animation-name: bounceOutUp;-webkit-animation-name: bounceOutUp;-o-animation-name: bounceOutUp;}

经过兼容性支持后，大部分手机里的弹窗广告动画都是正常的。但是有个iphone 6弹窗广告始终X不掉，而且是广告是直接显示出来，没有动画效果。猜测应该是动画的问题，联想到就他的一部手机是这样，查看IOS系统设置，发现开启了"减弱动态效果"。开启这个效果后，所有的动画都不会展示。

针对这个问题需要利用@Media媒体查询区分处理，开启"减弱动态效果"的手机，直接展示最终画面，去掉动画，其余的仍按照原来的方式处理。

/**针对设置了减弱效果的CSS设置 start*/
@media screen and (prefers-reduced-motion: reduce) {.animated {animation: unset !important;transition: none !important;}.bounceInDown {opacity: 1;transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}.bounceOutUp {display: none;}.pop_ad_background_hide{display: none;}
}@media screen and (prefers-reduced-motion) {.animated {animation: unset !important;transition: none !important;}.bounceInDown {opacity: 1;transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}.bounceOutUp {display: none;}.pop_ad_background_hide{display: none;}
}
/**针对设置了减弱效果的CSS设置 end*/

没有设置减弱动态效果的，就还是原来的写法：

/**针对没有设置的减弱效果的CSS设置*/
@media screen and (prefers-reduced-motion: no-preference) {.animated {animation-duration: 1s;animation-fill-mode: both;-moz-animation-duration: 1s;-moz-animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both;-o-animation-duration: 1s;-o-animation-fill-mode: both;}@keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}}@-webkit-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}}@-moz-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}}@-o-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}}.bounceInDown {animation-name: bounceInDown;-webkit-animation-name: bounceInDown;-moz-animation-name: bounceInDown;-o-animation-name: bounceInDown;}@keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}}@-webkit-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}}@-moz-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}}@-o-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}}.bounceOutUp {animation-name: bounceOutUp;-moz-animation-name: bounceOutUp;-webkit-animation-name: bounceOutUp;-o-animation-name: bounceOutUp;}
}/**针对iphone ios10 上面媒体查询失效的问题，单独拿出来再写一遍 start*/
.animated {animation-duration: 1s;animation-fill-mode: both;-moz-animation-duration: 1s;-moz-animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both;-o-animation-duration: 1s;-o-animation-fill-mode: both;
}@keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}@-webkit-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}@-moz-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}@-o-keyframes bounceInDown {0%,60%,75%,90%,100% {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;transform: translate3d(0, -3000px, 0);-webkit-transform: translate3d(0, -3000px, 0);-moz-transform: translate3d(0, -3000px, 0);-ms-transform: translate3d(0, -3000px, 0);-o-transform: translate3d(0, -3000px, 0);}60% {opacity: 1;transform: translate3d(0, 25px, 0);-webkit-transform: translate3d(0, 25px, 0);-moz-transform: translate3d(0, 25px, 0);-ms-transform: translate3d(0, 25px, 0);-o-transform: translate3d(0, 25px, 0);}75% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}90% {transform: translate3d(0, 5px, 0);-webkit-transform: translate3d(0, 5px, 0);-moz-transform: translate3d(0, 5px, 0);-ms-transform: translate3d(0, 5px, 0);-o-transform: translate3d(0, 5px, 0);}100% {transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);}
}.bounceInDown {animation-name: bounceInDown;-webkit-animation-name: bounceInDown;-moz-animation-name: bounceInDown;-o-animation-name: bounceInDown;
}@keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}@-webkit-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}@-moz-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}@-o-keyframes bounceOutUp {20% {transform: translate3d(0, -10px, 0);-webkit-transform: translate3d(0, -10px, 0);-moz-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);-o-transform: translate3d(0, -10px, 0);}40%,45% {opacity: 1;transform: translate3d(0, 20px, 0);-webkit-transform: translate3d(0, 20px, 0);-moz-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);-o-transform: translate3d(0, 20px, 0);}100% {opacity: 0;transform: translate3d(0, -2000px, 0);-webkit-transform: translate3d(0, -2000px, 0);-moz-transform: translate3d(0, -2000px, 0);-ms-transform: translate3d(0, -2000px, 0);-o-transform: translate3d(0, -2000px, 0);}
}.bounceOutUp {animation-name: bounceOutUp;-moz-animation-name: bounceOutUp;-webkit-animation-name: bounceOutUp;-o-animation-name: bounceOutUp;}
/**针对iphone ios10 上面媒体查询失效的问题，单独拿出来再写一遍 end*/

这个问题比较坑，希望能帮到遇到同样问题的人。

iphone CSS动画失效相关推荐

1. [京东实践干货]手把手教你实现「京喜工厂」的CSS动画效果

   0 契机与背景 今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发.用户可以通过「京喜工厂」参与口罩.抽纸.大米等商品的"在线生产",既能趣味造物,又能免费领 ...

2. css动画和js动画比较！

   原文地址:http://css-tricks.com/myth-busting-css-animations-vs-javascript/ 译文地址:https://github.com/classi ...

3. CSS动画效果无限循环放大缩小

   效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...

4. 【译】CSS动画 vs JS动画

   原文地址 目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...

5. Vue 中 CSS 动画原理

   下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...

6. 前端技术周刊 2019-01-07：CSS 动画

   2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...

7. 超棒的跨浏览器纯CSS动画实现 - Animate.css

   为什么80%的码农都做不了架构师?>>>    日期:2012-8-12  来源:GBin1.com 在线演示  本地下载 通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...

8. Windows 10截屏动画失效怎么恢复？

   在Windows10系统下,如果想要截屏,只要按下Win+PrintScreen,屏幕就截图成功了,图片会自动保存在"此电脑\图片\屏幕截图"中.使用过该截屏方法的用户,肯定知道在 ...

9. 盒子端 CSS 动画性能提升研究

   不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

最新文章

1. Java IO 概述
2. 热烈庆祝 ubuntu10.10发布
3. 利用微软Atlas消费外部Web服务
4. PCL：PCL与MFC 冲突总结
5. 爬虫常用Xpath和CSS3选择器对比
6. 电脑能开机但进不去系统，电脑只能进安全模式怎么处理？
7. hive 建表java_hive创建表报错
8. ABAQUS6.10 VS2008 Intel fortan11.1
9. 最详细教学--实现win10 多用户同时远程登录内网机--win10+frp+rdpwrap+阿里云服务器
10. 模板--templates
11. 华为hcie认证中-VxLAN 网管划分
12. 一年Java的阿里电话面试全纪录
13. RecordCount
14. 为什么计算机桌面图标不见了,为什么电脑桌面上的图标全不见了？
15. 反走样知识简单分享-计算机图形学
16. 在Unity顶部显示手机状态栏（iOS/Android）
17. TouTiao开源项目 分析笔记15 新闻详情之两种类型的实现
18. 京东格力空调和专卖店有什么区别？
19. 泰山OFFICE技术讲座：Times New Roman的kerning研究
20. leetcode和牛客网刷题

热门文章

1. Java开发【Spring之AOP详解（xml--注解-＞方法增强、事务管理（声明事务的实现））】
2. Google All in AI都做了什么？
3. 魔兽地图编辑器触发音效无法播放
4. Spring框架@PostConstruct注解详解
5. 新财报净亏损近30亿美金，波音何时才能再“起飞”？
6. SQL Server2008r2安装配置
7. 宝塔数据库mysql误删除快速恢复
8. JAVA毕设项目数字家谱管理系统设计与实现（Vue+Mybatis+Maven+Mysql+sprnig+SpringMVC）
9. PHP获取随机数和取整
10. 今天早上看到的一件新鲜事