0

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;
    }}
ghett
  • 89
  • 9

1 Answers1

0

stdDeviation is not a CSS property and can't be animated with CSS animations. You must use SMIL or JavaScript.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • such a simple answer. how could I miss... Tell me please, inside script only way is a cycle i++ ? And what a way more resource-intensive, script or SMILL? – ghett Oct 19 '16 at 08:23
  • how about this: – ghett Oct 19 '16 at 08:31
  • wtf, sry. so: var k = $("icon").attr("stdDeviation"); – ghett Oct 19 '16 at 08:32
  • wtf with the stackoverflow, i can't write message) so, lets try again: – ghett Oct 19 '16 at 08:34
  • aggaggagaggagg var k = $("icon").attr("stdDeviation"); var i = 0.5; for (k <= 3) k = k + i; Tell me, please, how a can set delay between steps of this cycle? – ghett Oct 19 '16 at 08:36
  • http://stackoverflow.com/questions/10485385/how-do-i-correctly-use-setinterval-and-clearinterval-to-switch-between-two-diffe – Michael Mullany Oct 19 '16 at 15:51