CSS keyframes generator for LESS (http://lesscss.org/). Works with:
- less.js 0.3.1+ and tools based on it (Node.js usage, WinLess, etc)
- lessphp 0.4.0+ (http://leafo.net/lessphp/)
Inspired with tools and solutions like:
- https://github.com/kuus/animate-me.less/
- http://stackoverflow.com/a/16147018
- http://stackoverflow.com/a/14853591
- Cross-browser keyframes generation (Firefox 5+, Chrome 3+, Safari 4+, Opera 12+, IE 10+)
- Up to 16 timepoints in each
keyframesrule (and the number can be easily augmented, if needed) - Mixins, variables and functions can be used for styling timepoints
- Keyframes are created separately from
animationrules, so:- multiple
animationrules can use the same keyframe with different values for timing, repeating, etc, - multiple animations can be used within same
animationrule - animations can be applied (not created!) inside any parent selector
- multiple
- Lightweight and (almost) neat LESS code
Please fork and fix!
- Keyframes cannot be generated inside any parent selector (top-level only)
- First timepoint must have at least one resulting style rule
- Resulting CSS code is not so neat:
- some newlines are missing in lessphp version,
- timepoint indents missing in both versions,
- some necessary hacks produced (
/* fully commented ugliness */for less.js version, and null-selectorx:not(x)for lessphp version)
Download and import the library into your LESS file (for lessphp, use keyframes_lessphp.less instead):
@import 'keyframes.less';For using keyframes, assuming you also have an animation LESS mixin like this (not included in library):
.animation(@value) {
-webkit-animation: @value;
-moz-animation: @value;
-o-animation: @value;
animation: @value;
}Example 1. Basic usage
// Preparing styles for animation points
.keyframes-item(fadeIn, 0%) {
opacity: 0;
}
.keyframes-item(fadeIn, 100%) {
opacity: 1;
}
// Generating keyframes
.keyframes(fadeIn);
// Applying animation to fade-in block in 1.5 seconds
.myBlock {
.animation(fadeIn 1.5s);
}Example 2. Three animation points
// Now we need styles for more points
.keyframes-item(colorChange, 0%) {
color: red;
}
.keyframes-item(colorChange, 37%) {
color: green;
}
.keyframes-item(colorChange, 100%) {
color: blue;
}
// Generating keyframes (note the timepoints other than 0%, 100% must be passed explicitly)
.keyframes(colorChange, 0%, 37%, 100%);
.parentBlock {
// Yes, you can APPLY (not create!) keyframes animation at any level of selectors tree
.colorBlock {
.animation(colorChange 2s);
}
}Example 3. Hold opacity at 0, then fade-in
// (Assuming you've also generated fadeIn keyframes from example #1)
// Note '0%, 100%' are passed as SINGLE param, and so quouted together
// Even replacing comma with semicolon doesn't help
.keyframes-item(holdTranparent, '0%, 100%') {
opacity: 0;
}
// Note the empty string ('') passed as second param
.keyframes(holdTranparent, '0%, 100%', '');
// Note the semicolon at the end of multiple animations list
.wait-2s-then-appear {
.animation(holdTransparent 2s, fadeIn 1s 2s ease-out;);
}Example 4. Some crazy animation
.keyframes-item(crazy, 0%) {
// first item cannot be empty, or keyframes could not be generated
font-size: 72em;
}
.keyframes-item(crazy, 12%) {
.my-mixin(round(@myVar)); // you can use mixins, functions and variables
}
.keyframes-item(crazy, 21%) {
// more
}
.keyframes-item(crazy, 29%) {
// and more
}
.keyframes-item(crazy, 36.6%) {
// you can use fractional percents (if you really want to)
}
.keyframes-item(crazy, 62.5%) {
// but anyway, it must have a percent sign!
}
// (there could be more; up to 16 timepoints in all)
.keyframes-item(crazy, 100%) {
// finally!
}
// Generating the keyframe rules... ufff!
.keyframes(crazy, 0%, 12%, 21%, 29%, 36.6%, 62.5%, 100%);
// And applying this (and maybe more) animations at some poor element
.crazy-jumper {
// (some other styles here, maybe)
// Repeat our crazy animation for 44 times, simultaneously fading that in for 18 times and changing colors
.animation(
crazy 10s 44,
fadeIn 0.9s ease-in-out 18,
colorChange 4.5s 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent