在项目中需要在支付结果页面加入弹窗广告,并提供动画效果。在参考了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*/
这个问题比较坑,希望能帮到遇到同样问题的人。