使用比例时 CSS 关键帧过渡暂停

Question

我有以下代码:

@keyframes sonar-wave {
    0% {
        transform: scale(1.00);
        opacity: 0;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

当它触发时，我会在继续缩放之前看到一个“暂停”。我想要一个平滑的缩放动画。在这里 fiddle :

https://jsfiddle.net/Lztxfho9/

我做错了什么？

Answer 1

那是因为你没有指定 timing function , 所以浏览器会默认为ease

改成

animation: sonar-wave 2s linear forwards;