<metaname="description"content="The CSS Plugin for KUTE.js extends the core engine with additional box model properties, color properties, border-radius, text properties and others.">
<p>The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the <ahref="examples.html">examples page</a>. The focus is on box model properties like <code>padding</code>, <code>margin</code> or <code>borderWidth</code>, as well as other types of properties like <code>borderRadius</code>, <code>borderColor</code>, <code>backgroundPosition</code>, <code>borderColor</code> or <code>clip</code>.</p>
<h3>Border Radius</h3>
<p>In the example below we are doing some animation on the <code>border-radius</code> property. The first box animates all corners, while the other boxes animate each corner at a time. A quick reminder, for radius properties KUTE.js supports <code>px</code>, <code>%</code> and text properties' units such as <code>em</code> or <code>rem</code>.</p>
<p>A quick important reminder here is that KUTE.js does not support shorthands for radius properties. Also early implementations by Mozilla's Firefox browser like <code>-moz-border-radius-topleft</code> are not supported because they were depracated with later versions. Download this example <ahref='http://codepen.io/thednp/share/zip/VvpypW/'>here</a>.</p>
<h3>Box Model Properties</h3>
<p>The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as <code>outlineWidth</code>, <code>minWidth</code> or <code>maxHeight</code> require a more complex context and we won't insist on them.</p>
var tween2 = KUTE.to('selector1',{marginBottom:50});
var tween3 = KUTE.to('selector1',{padding:30});
var tween4 = KUTE.to('selector1',{margin:'5%'});
</code></pre>
<p>We're gonna chain these tweens and start the animation. You can download this example <ahref='http://codepen.io/thednp/share/zip/xwqYbX/'>here</a>.</p>
<p>TIP: the <code>width</code> and <code>height</code> properties used together can be great for <code>scale</code> animation fallback on images for legacy browsers.</p>
<h3>Text Properties</h3>
<p>OK here we're gonna do a cool example for text properties. Basically the below code would work:</p>
var tween2 = KUTE.to('selector1',{lineHeight:24});
var tween3 = KUTE.to('selector1',{letterSpacing:50});
var tween3 = KUTE.to('selector1',{wordSpacing:50});
</code></pre>
<p>But our example will feature some more than just that. We're gonna animate each character of a given string, with a small delay. The heading will animate <code>fontSize</code> and <code>letterSpacing</code> properties for each character while the button will animate <code>fontSize</code> and <code>lineHeight</code> properties. Watch this:</p>
<p>TIP: this should also work in IE8 as a fallback for scale animation for text. It's not perfect, can be improved for sure, but if it's a must, this would do. Download this example <ahref='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
<h3>Color Properties</h3>
<p>The next example is about animating all border color properties, since the core engine already supports text <code>color</code> and <code>backgroundColor</code> properties. So check these lines for reference.</p>
<p>A quick reminder: you can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on IE8 and it will fallback to <code>RGB</code>.</p>
<h3>Clip Property</h3>
<p>This property allows you to animate the rectangular shape of an element that is set to <code>position:absolute</code>. In CSS this property works like this <code>clip: rect(top,right,bottom,left)</code> forming a rectangular shape that masks an element making parts of it invisible.</p>
<divclass="example-item example-box bg-red"style="position: absolute; background: url('http://img.dummy-image-generator.com/people/dummy-250x250-Eye.jpg') center center no-repeat;"></div>
<divclass="example-buttons">
<aclass="btn btn-olive"href="#">Start</a>
</div>
</div>
<p><strong>Note</strong> that this would produce no effect for elements that have <code>overflow:visible</code> style rule. Download this example <ahref='http://codepen.io/thednp/pen/NGpYmM/'>here</a>.</p>
<h3>Background Position</h3>
<p>Another property we can animate with KUTE.js is <code>backgroundPosition</code>. Quick example:</p>
<divclass="example-item example-box"style="background: url('http://img.dummy-image-generator.com/abstract/dummy-400x300-Rope.jpg') center center no-repeat;"></div>
<divclass="example-buttons">
<aclass="btn btn-lime"href="#">Start</a>
</div>
</div>
<p>Download this example <ahref='http://codepen.io/thednp/share/zip/EVWEwJ/'>here</a>.</p>
<liclass="hidden-xs"><atarget="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook"><spanclass="ion-social-facebook-outline icon"></span></a></li>
<liclass="hidden-xs"><atarget="_blank"href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter"><spanclass="icon ion-social-twitter-outline"></span></a></li>
<liclass="hidden-xs"><atarget="_blank"href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Google+"><spanclass="icon ion-social-googleplus-outline"></span></a></li>