Как я могу настроить статическую маску Webkit

Question

Спасибо, что нашли время, чтобы помочь мне.Я пытаюсь заставить маску Webkit (разработанную для IOS) оставаться в статичном положении и анимировать изображение, которое она маскирует.Я был в состоянии анимировать только маску или маску и изображение вместе, но за всю свою жизнь не могу понять, как анимировать изображение под маской без путешествующей с ней маски.

Любое решение должно быть чисто HTML5, CSS, JS, поскольку я не могу строить с какими-либо внешними зависимостями (jquery и т. Д.)

Есть мысли?

Answer 1

Вы пытались установить изображение в качестве фонового изображения и анимировать background-position?

Вот пример использования CSS3 для анимации положения фона, но вы также можете легко использовать javascript: http://jsfiddle.net/blineberry/sRAfw/

Или вы можете использовать оболочку для маски и img дочерний элемент. position: absolute img для оболочки и анимация стиля img top / right / bottom / left: http://jsfiddle.net/blineberry/KdHCH/