Question

我使用关键帧创建了一个效果，该效果可以放大并移动图片（肯恩·伯恩斯效果）。

一切正常，直到使用其他浏览器为止。在Chrome上，它的运行速度非常慢，而且我希望达到确切的速度，但是在Firefox上，动画的运行速度要快得多。我将时间跨度设置为30秒。

    .image-kenburns {
    overflow: hidden;
    position: relative;
    z-index: -1;
    animation: kenburns 30s linear infinite;
    height: 270px;
    width: 100%;
}

@keyframes kenburns {


    0% {
         transform: scale(1.0);
         -ms-transform: scale(1.0);
         -webkit-transform: scale(1.0);
         -o-transform: scale(1.0);
         -moz-transform: scale(1.0);
        background-position: top center;
     }

    50% {
        -webkit-transform-origin: bottom right;
        -moz-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
        -o-transform-origin: bottom right;
        transform-origin: bottom right;
        transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -moz-transform: scale(1.1);
        background-position: bottom center;
    }

    75% {
        -webkit-transform-origin: bottom center;
        -moz-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        -o-transform-origin: bottom center;
        transform-origin: bottom center;
        transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -moz-transform: scale(1.1);
        background-position: bottom center;
    }



    100% {
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0);
        background-position: top center;
    }
}

我有什么方法可以设置不同浏览器的速度？

编辑：

如评论中所述，我应该只能使用1个供应商前缀？我需要所有浏览器的支持。还提到了：animation-duration似乎不适合我。我通过设置更长的持续时间来在Firefox上进行尝试，但它丝毫没有影响。我在做什么错了？

CSS关键帧在不同浏览器中的速度不同

0 个答案: