i am creating animation based on GaussianBlur (attribute "stdDeviation"), inside tag "animate" all is working, but i'm trying to use css animation. And it's doesnt work. When i had put attribute "stdDeviation" inside @keyframes browser returned "unknown property name". working version of animation:
<filter id="f2" width="250%" height="250%">
<feOffset result="offOut" in="SourceGraphic" dx=".5" dy=".5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" id="gauss">
<animate attributeName="stdDeviation" attributeType="XML" dur="2s" values="1 ; 1.5 ; 2 ; 2.5 ; 3 ; 2.5 ; 2 ; 1.5 ; 1 " keyTimes="0 ; .13 ; .26 ; .39 ; .52; .65 ; .78; .9; 1" repeatCount="indefinite"/>
</feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
@keyframes, they doesn't work:
#gauss {
-webkit-animation: gauss_keys 3s ease-out forwards infinite;
animation: gauss_keys 3s ease-out forwards infinite;}
@keyframes gauss_keys {
0% {
stdDeviation: 0;
}
100% {
stdDeviation: 2;
}}