Почему анимация работает только при перемещении курсора

Question

В 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>

Answer 1

C нативной svg-анимацией работает получше в хроме (но к такой анимации не применяется transform-origin в Safari):

<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" transform-origin="150 70">
              <animateTransform attributeName="transform" attributeType="XML" type="scale" values="0;1;1;1.3;1.3;0" dur="9s" repeatCount="indefinite" />
            </path>
            
        </mask>
    </defs>
    <path d="M0 -10 H 300 V 150 H 0 V-10" fill="#EBE1F6" fill-opacity="0.8" mask="url(#ovalClip)"/>
</svg>

Вариант с выводом фигуры за пределы тега mask:

#mask{
  animation: mask 9s linear 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" maskUnits="userSpaceOnUse">
                <path d="M0 -10 H 300 V 150 H 0 V-10" fill="white"/>
                <use href="#ellipse"/>
            </mask>
    </defs>
    <symbol id="ellipse">
        <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" />
    </symbol>
    <path d="M0 -10 H 300 V 150 H 0 V-10" fill="#EBE1F6" fill-opacity="0.8" mask="url(#ovalClip)"/>
</svg>

Answer 2

Это видимо баг анимаций трансформаций CSS в последних версиях Chrome. Событий мышки нет, а браузер ждет их и не начинает анимацию. В погоне за новыми технологиями Chrome теряет то, что раньше прекрасно умел. Особенно это касается трансформаций, масок, градиентов, фильтров SVG.

В примере ниже я перенес анимацию увеличения в SMIL SVG. Пока это работает до выхода новых версий ...

Добавил картинку в качестве фона, чтобы было видно, как при fill="black" маска mask="url(#ovalClip)" прорезает, закрывающий её прямоугольник

#mask {
  transform-origin: center;
  transform-box:fill-box;
}

<svg id="svg1" 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" >
            <animateTransform   attributeName="transform" type="scale" begin="0s" dur="6s" values="0;1;1;1.5;1.5;1.5;0" repeatCount="indefinite" />         
            </path>     
        </mask>
    </defs> 
      <image href="https://i.stack.imgur.com/dJ04S.jpg" x="10" width="100%" height="100%" /> 
    <path d="M0 -10 H 300 V 150 H 0 V-10" fill="#EBE1F6"  mask="url(#ovalClip)"/> 
</svg>

БЛОГ НА HUSL

Почему анимация работает только при перемещении курсора

Ответы (2 шт):