Set svg animate's attribute from css - css

Question

I have an SVG animation, I want to set animate tags attribute from and to using css.
like:
animate{
from: #f7f7f7;
to: #33d424;
}
Is this possible, how can I do that ?
Here is my SVG code:
<svg width='100px' height='100px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-squares">
<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
<rect x="15" y="15" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.0s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
<rect x="40" y="15" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.125s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
<rect x="65" y="15" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.25s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
<rect x="15" y="40" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.875s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
<rect x="65" y="40" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.375" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
<rect x="15" y="65" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.75s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
<rect x="40" y="65" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.625s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
<rect x="65" y="65" width="20" height="20" fill="#f7f7f7" class="sq">
<animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.5s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
</rect>
</svg>

Answer 1

You would have to use CSS animations instead of SVG ones. Something like this:
http://jsfiddle.net/scarl3tt/g2frngcn/
#keyframes animate {
0% {
fill: #f7f7f7;
}
6.25% {
fill: #33d424;
}
12.5% {
fill: #f7f7f7;
}
}
You also need to delay each element's animation to make them run in sequence. I wrote this in pure CSS because I'm not sure how familiar you are with SASS/LESS, but using a preprocessor and an autoprefixer makes this kind of thing a lot easier.