iphone CSS动画失效

最新推荐文章于 2024-03-15 07:30:00 发布

GAMELOFT9

最新推荐文章于 2024-03-15 07:30:00 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签：减弱动态效果动画不起作用 CSS prefers-reduced-motion

本文链接：https://blog.youkuaiyun.com/GAMEloft9/article/details/83651314

HTML5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何解决iOS设备上因减弱动态效果设置导致的弹窗广告动画失效问题，通过媒体查询区分处理，确保动画正常展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中需要在支付结果页面加入弹窗广告，并提供动画效果。在参考了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*/

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