CSS3 动画可在除 Chrome 之外的所有浏览器中使用答案

【问题标题】：CSS3 animations working in every browser except ChromeCSS3 动画可在除 Chrome 之外的所有浏览器中使用
【发布时间】：2016-11-01 20:38:28
【问题描述】：

在除 Chrome 之外的所有浏览器中都能完美运行。淡入效果似乎工作正常，但floatInCommand 动画卡顿并使 Commend（引导容器）在 1 秒后锁定到位。我不知道是否需要添加“-webkit”之外的任何其他内容。我查看了具有类似问题的线程，它们都通过添加“-webkit”来修复它。

.slide-in {
    -webkit-animation-name: floatInCommend;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 1.25s;
}
@-webkit-keyframes floatInCommend {
    from {
        opacity: 0;
        top: -100%;
    }
    to {
        opacity: 1;
        top: 75;
    }
}

.slide-in-footer {
    -webkit-animation-name: floatInFooter;
    -webkit-animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: both;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0.5s;
}
@-webkit-keyframes floatInFooter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.slide-in-nav {
    -webkit-animation-name: floatInFooter;
    -webkit-animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: both;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0.5s;
}
@-webkit-keyframes floatInNav {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

【问题讨论】：

标签： javascript jquery css google-chrome

【解决方案1】：

您需要 -webkit、-moz 和非供应商前缀属性。考虑使用任务运行器和自动前缀器，以确保在发布代码之前拥有所有 CSS 供应商前缀。

【讨论】：

谢谢，我试试看。
当然！没问题。