В Chrome некорректно работает анимация увеличения овала. Анимация начинает работать только при постоянном перемещении мыши в окне браузера. В Safari такой проблемы нет.
#mask {
animation-name: mask;
animation-duration: 9s;
animation-iteration-count: infinite;
transform-origin: 150px 70px;
}
@keyframes mask {
0% {
transform: scale(0);
}
10% {
transform: scale(1);
}
40% {
transform: scale(1);
}
45% {
transform: scale(1.3);
}
98% {
transform: scale(1.3);
}
100% {
transform: scale(0);
}
}
<svg width="300" height="140" viewBox="0 0 300 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="ovalClip">
<path d="M0 -10 H 300 V 150 H 0 V-10" fill="white"/>
<path
id="mask"
d="M150 26C133.431 26 120 39.4315 120 56V84C120 100.569 133.431 114 150 114C166.569 114 180 100.569 180 84V56C180 39.4315 166.569 26 150 26Z"
fill="black"
/>
</mask>
</defs>
<path d="M0 -10 H 300 V 150 H 0 V-10" fill="#EBE1F6" fill-opacity="0.8" mask="url(#ovalClip)"/>
</svg>
Chrome 93.0.4577.82
проблема наблюдается. Открыта одна вкладка