使用缩放时 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;
    }
}

触发此操作时，我会在秤继续之前看到“暂停”。我想要一个平滑的缩放动画。在这里摆弄：

https://jsfiddle.net/Lztxfho9/

我做错了什么？

Answer 1

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

改成

animation: sonar-wave 2s linear forwards;