<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<li><kbdclass="bg-olive">url()</kbd> function links an element to an SVG filter, the function is supported to keep it's value into the target element's style in case it's set
initially or you want to set it yourself.</li>
<li><kbdclass="bg-olive">opacity()</kbd> can animate the opacity for a target element in the 0-100% range. Default is 100%.</li>
<li><kbdclass="bg-olive">blur()</kbd> can animate the blur for a target element in the 0-Infinity range. Default is <b>0px</b> and the unit is always <code>px</code>.</li>
<li><kbdclass="bg-olive">saturate()</kbd> can animate the color saturation for a target element in the 0-Infinity range. Default is 100%.</li>
<li><kbdclass="bg-olive">grayscale()</kbd> can animate the color desaturation for a target element in the 0-100% range. Default is 0%.</li>
<li><kbdclass="bg-olive">brightness()</kbd> can animate the brightness for a target element in the 0-Infinity range. Default is 100%.</li>
<li><kbdclass="bg-olive">contrast()</kbd> can animate the contrast for a target element in the 0-Infinity range. Default is 100%.</li>
<li><kbdclass="bg-olive">sepia()</kbd> can animate the sepia filter for a target element in the 0-100% range. Default is 0%.</li>
<li><kbdclass="bg-olive">invert()</kbd> can animate the color inversion for a target element in the 0-100% range. Default is 0%.</li>
<li><kbdclass="bg-olive">hueRotate()</kbd> can animate the color hue rotation for a target element in the 0-Infinity range. Default is 0deg.</li>
<li><kbdclass="bg-olive">dropShadow()</kbd> can animate the shadow and all related parameters for a target element. Default is <code>[0,0,0,'black']</code></li>
</ul>
<h3>Examples</h3>
<p>Let's have a look at some sample tween objects and a quick example:</p>
<divclass="example-item example-box"style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE1</div>
<divclass="example-item example-box"style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE2</div>
<divclass="example-item example-box"style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE3</div>
<li>The CSS filter property is supported on all major browsers nowadays, but it's better to <ahref="https://caniuse.com/#feat=css-filter-function">check</a> and
<li>This component can be a great addition to all SVG related components, especially because the <code>dropShadow</code> provides a better experience than
<code>boxShadow</code>, as <ahref="https://codepen.io/Kseso/pen/Ajamv">shown here</a>.</li>
<li>Since this component can work with the <code>url()</code> function the way it does, the <ahref="htmlAttributes.html">HTML Attributes</a> component will
complement greatly for even more animation potential.</li>
<li>Similar to the <ahref="htmlAttributes.html">HTML Attributes</a> component, this one can also deal with specific function namespace, for instance <code>hue-rotate</code> and
<code>hueRotate</code>.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>