Решение SVG
Все фильтры, градиенты, маски, клипы пришли в CSS из SVG. Поэтому необходимо добавить решение c SVG градиентами.
Всё в принципе повторю из css решения, те же цвета в stop-color
, те же проценты в stop offset
, но анимация получается более мощной и зрелищной.
Горизонтальное перемещение градиента
Анимация достигается изменением значения параметра fx
радиального градиента, отвечающего за горизонтальную координату центра градиента.
Запуск анимации - клик по прямоугольнику
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="0%" fy="5%" r="200%"
>
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%" />
<text x="50%" y="60%" font-size="28px" text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fx"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;0%"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>
Атрибут keyTimes
обеспечивает неравномерность движения, количество значений должно равняться количеству значений в атрибуте values
Подробнее здесь.
values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"
Вертикальная анимация градиента
В этом случае анимируется fy
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="48%" fy="0%" r="200%"
>
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="3%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%" />
<text x="50%" y="60%" font-size="28px" text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fy"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;50%;50%;0%"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>
Анимация по диагонали
Анимируются одновременно оба параметра fx
, fy
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="0%" fy="0%" r="200%">
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="3%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%" />
<text x="50%" y="60%" font-size="28px" text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fy"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;50%;50%;0%"
repeatCount="1"
restart="whenNotActive" />
<animate xlink:href="#radGrad"
attributeName="fx"
dur="2s"begin="gr1.click"
values="0%;50%;50%;100%;50%;50%;0%"
repeatCount="1"
restart="whenNotActive" />
</svg>
</div>
Анимация по наведению курсора
Условие запуска анимации: begin="rect1.mouseover"
<style>
</style>
<div id="shine-div">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100">
<defs>
<radialGradient id="radGrad" fx="0%" fy="5%" r="200%"
>
<stop offset="0%" stop-color ="#FFFFFF" />
<stop offset="4%" stop-color ="#ffb3ff" />
<stop offset="12.25%" stop-color ="#ff33ff" />
<stop offset="31.25%" stop-color ="#800080" />
<stop offset="50%" stop-color ="#b300b3" />
</radialGradient>
</defs>
<g id="gr1" >
<rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%" />
<text x="50%" y="60%" font-size="28px" text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
</g>
<animate xlink:href="#radGrad"
attributeName="fx"
dur="1s"
begin="rect1.mouseover"
values="0%;100%;0%"
repeatCount="1"
fill="freeze"
/>
</svg>
</div>