chester40

Да уж, думаю рано пока еще clip-path использовать, если кроссбраузерность хорошая нужна ) А то в каком-нибудь браузере косяк да вылезет)

Спасибо за информацию, не знал о таком. У меня заработало в старом Firefox, но всё еще не работает в Хроме и Опере. В связи со всем вышеизложенным не стал дальше извращаться и решил вопрос с помощью gif анимации ) Так надёжнее ) Всем спасибо за помощь!

К сожалению не помогло. Еще выяснилось что в Firefox 50 тоже не работает.

Здравствуйте. Прошу помочь в решении следующей задачи: Имеется родительский элемент со свойством clip-path и дочерний элемент с анимацией: Для примера: HTML <div id="logoimage-waves"> <div id="waves-animated"></div> </div> <svg> <clipPath id="WavesPolygon"> <polygon points="0 0,95 0,95 8,80 5,60 10,40 15,20 20"> </polygon> </clipPath> </svg> CSS #logoimage-waves { width: 100px; height: 100px; clip-path: url("#WavesPolygon"); -webkit-clip-path: polygon(0px 0px,95px 0px,95px 8px,80px 5px,60px 10px,40px 15px,20px 20px); position: absolute; } #waves-animated { width: 100px; height: 100px; position: absolute; background: url(/images/waves.png) no-repeat; animation: waves-animation 40s; } @keyframes waves-animation { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } Вопрос следующий: В Firefox всё работает как надо, дочерний анимированный элемент обрезается с помощью свойства clip-path родительского элемента. Но в других браузерах (проверял в Chrome 55 и Opera 41) обрезка не работает и элемент показывается полностью. Причём, что важно, это происходит только в том случае, если дочерний элемент анимирован с помощью свойства transform, а если анимируется другое свойство, например margin, то обрезка работает во всех браузерах. Короче говоря: дочерние элементы анимированные с помощью transform не обрезаются с помощью clip-path родительского элемента в Хроме и Опере. В общем задачка та еще. Второй день пытаюсь решить ) Благодарю за внимание!