Question

除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;
    }
}

Answer 1

您需要-webkit，-moz和非供应商前缀属性。考虑使用任务运行程序和自动修复程序，以确保在发布代码之前已准备好所有css供应商前缀。

除Chrome之外的每个浏览器都可以使用CSS3动画

1 个答案: