Задавал здесь же вопрос про эту цифру, а как добавить всю это анимацию в css, к примеру если класс дать, тогда будет анимация. Хочу сделать, так чтоб при клике к примеру на кнопку цифра плавно закрашивалась.
svg text {
font-family: sans-serif;
text-anchor: middle;
font-weight: bold;
font-size: 70px;
fill: url(#fendTestGrad);
}
#fendTestGrad .start {
stop-color: #c2c5cc;
}
#fendTestGrad .end {
stop-color: #8f98a1;
}
svg {
background: linear-gradient(135deg, rgba(73,85,97,1) 0%, rgba(74,88,101,1) 100%);
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
<defs>
<linearGradient id="fendTestGrad" x1="52%" y1="52%" x2="48%" y2="48%">
<animate
attributeName="x1"
from="0" to=".52"
dur="3s"
repeatCount="1">
</animate>
<animate
attributeName="y1"
from="0" to=".52"
dur="3s"
repeatCount="1">
</animate>
<animate
attributeName="x2"
from="0" to=".48"
dur="3s"
repeatCount="1">
</animate>
<animate
attributeName="y2"
from="0" to=".48"
dur="3s"
repeatCount="1">
</animate>
<stop class="start"></stop>
<stop class="start"></stop>
<stop class="end"></stop>
</linearGradient>
</defs>
<text x="50%" y="70">60</text>
</svg>