Animation command
Tween between different elements (frames) to create an animation.
Basic Usage (HTML)
data-jkit="[animation:delay=4000;speed=slow;to=width(50%),height(50px)]"
Advanced Init (JavaScript)
$('#myelement').jKit('animation', { 'delay': '4000', 'speed': 'slow', 'to': 'width(50%),height(50px)' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| fps | Int | 25 | The frames per second of the animation |
| loop | “yes” or “no” | no | Play the animation only once or in a loop? |
| delay | Int (Milliseconds) | 0 | The delay before the animation starts |
| speed | Int or “fast”, “slow” (Milliseconds) | 500 | The duration of the animation in milliseconds, bigger = slower. |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
| from | jKit CSS String, example: “margin-top(20px),height(50px)” | Animate from this CSS (optional) | |
| to | jKit CSS String | Animate to this CSS (if you leave this empty, keyframe animation is used) | |
| on | jQuery event (“click”, “mouseover”, “mouseout” …) | The event used to start the animation. Leave it empty for immediate start | |
| macro | Macro name | This optional macro will be applied to the element after the animation has finished |
Events
| Event | Description |
|---|---|
| complete | Triggered when the animation is finished |
| showframe | Triggered on each frame |
| showframeN | Triggered on a specific frame where “N” is the frame number |
Examples
CSS animation overview:
An example showing most of the options:
After four seconds …
On click …
On mouseenter and mouseleave …
Source:
<p class="demobox" data-jkit="[animation:delay=4000;speed=500;to=width(50%),height(50px)]"> After four seconds ... </p> <p class="demobox" data-jkit="[animation:on=click;speed=500;to=width(50%),height(50px)]"> On click ... </p> <p class="demobox" data-jkit="[animation:on=mouseenter;speed=250;to=width(50%),height(110px)][animation:on=mouseleave;speed=250;to=width(100%),height(100px)]"> On mouseenter and mouseleave ... </p>
Keyframe animation overview:
An example showing most of the options:
animation
made
easy
easy
really easy!
Source:
<div class="animation-container" data-jkit="[animation:fps=30;loop=yes]"> <div class="animation" data-jkit="[frame:steps=100;action=fadeout]" style="font-size:90px;background:#000"><img src="../img/jkit_logo.png" alt="jKit" title="jKit" style="margin-top:110px"></div> <div class="animation" data-jkit="[frame:steps=7]" style="font-size:90px;line-height:260%">animation</div> <div class="animation" data-jkit="[frame:steps=10]" style="font-size:90px;line-height:260%">made</div> <div class="animation" data-jkit="[frame:steps=50;action=tween;easing=easeOutBounce]" style="font-size:200px;padding-top:110px">easy</div> <div class="animation" data-jkit="[frame:steps=1]" style="font-size:20px;opacity:0;padding-top:110px">easy</div> <div class="animation" data-jkit="[frame:steps=25]"></div> <div class="animation" data-jkit="[frame:steps=75;action=fadeinout]" style="font-size:50px;line-height:500%;color:#E01B49;background:#fff">really easy!</div> <div class="animation" data-jkit="[frame:steps=50]"></div> <div class="animation" data-jkit="[frame:steps=50;action=fadein]" style="background:#000"></div> </div>
Example CSS
div.animation-container {
position: relative;
width: 100%;
height: 250px;
background: #333;
font-family: "Arial Black", Arial, sans;
letter-spacing: 2px;
}
div.animation-container div.animation {
height: 250px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #fff;
}
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]