css - 使用缩放时 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/

我究竟做错了什么？

标签： csscss-animations

Answer 1

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

将其更改为

animation: sonar-wave 2s linear forwards;