LESSCSS and #keyframes - css

Has anyone had issues with LESSCSS and #keyframes or #-ms-keyframes? It compiles the CSS fine for #-webkit-keyframes, #-moz-keyframes and #-o-keyframes.

These are whitelisted, -ms is missing. keyframes should work: https://github.com/cloudhead/less.js/blob/master/lib/less/parser.js#L988
There is an open request for a fix: https://github.com/cloudhead/less.js/pull/498
The common workaround is to put keyframes in a separate .css file that you import - files with a .css extension are not parsed by LESS.

Keyframes generation seems to be very compicated in LESS, that is why appeared different hacks and tools such as:
https://github.com/kuus/animate-me.less
A bit complicated mixin generating both keyframes and animation with a single call. Accepts both animated elem selector and keyframes css content as strings. Up to 10 steps in keyframes
https://github.com/thybzi/keyframes
My tool inspired by animate-me and other solutions. Generates keyframes only. Animation needs to be applied separately - which allows to apply multiple animations to a single element, and also the same keyframes to multiple elements. More actions needed to create keyframes, but uses true css/less way to generate their style (so you can use variables, operations, functions and mixins there). Up to 16 keyframes steps

Related

Is there a 'local scope' animation definition in CSS?

Today I was having a hard time to find out a bug and then it turns out that one of my animation name was the exactly same with a bootstrap animation and it was overriding it.
So, in my example I've defined
#keyframes fadeIn {
// something different than bootstrap one
}
Since fadeIn was already defined in bootstrap this definition was overriding that. So, I thought it would be cool if we can define animations in 'local scope' or so but I couldn't find any results on web. Is there a thing like that or does anyone have any suggestion about what can be done while naming animations to be on the secure side?

I'm trying to use #keyframes to animate the background-color of an element but it's not working in Atom. What's the problem?

I'm new to coding and I'm learning how to use HTML and CSS. I downloaded Atom and I'm practicing on it. I'm trying to use the #keyframes function to animate the background-color of my square element but it doesn't seem to work on my web-browser (Firefox). I don't know what am I doing wrong.
image of the code:
Try using prefixes for crossbrowser support.
You can use a tool sutch as https://autoprefixer.github.io/
Autoprefixer is a PostCSS plugin which parse your CSS and add vendor prefixes.

Bobril - keyframes rule

I am trying to make progress loader component in Bobril, but I do not know how to add keyframes rule. Is there any way how to handle keyframes in Bobril.
AFAIK there is no direct support for keyframes in bobril, but you can still use b.injectCss() to directly inject keyframes definition and then use it as usual in b.styleDef() or b.style().
PS: Because of the lack of direct support, you should ensure uniqueness of the keyframes name by your own means.

GPU rendering on CSS3

I used to write OpenGL2.1 apps on C++. Now i am working in HTML5, because i have strong belief it going to be single UI platform.
I know that a lot of CSS3 animations/rules can be forced to GPU. But, none of them allow "user-level" computations.
I know that its not what CSS was designed for, but how can i make animation with simple math on pure CSS? I don't like idea of CPU wakeups.
As an example, simple task, easily solved by shaders with 0 CPU actions:
Timer on pure CSS
.
But it has an issue: it never stops. So, am I able to apply simple conditions? Like stop when animation-stop: 'content' < attr(target)
Mainly for education purposes.
A few ideas:
animation-iteration-count (MDN) is the simplest condition I could think of.
You could also use CSS Custom Properties (aka "CSS Variables") with a bit of JS:
:root {
--count: 19;
}
.selector {
animation-iteration-count: var(--count);
}
Now in JS you just have to modify a single value and that new value is instantly used in many declarations.
With JS, you can toggle class on HTML elements and CSS rules will or won't match depending on their selector rules.
Demos:
Update CSS Variables with JS
Parallax 3D Button with JS controlled CSS variables
You could also see "Conditions" for CSS Variables and CSS locks
But if you want to make something happen or stop, outside of hacks/trick kind of abusing CSS or with overcomplicated code, then JavaScript and DOM Events are the way to go.
You're speaking of GPU, computation, OpenGL so just in case: if you need computation intensive JS then give a try to ServiceWorkers. They can't modify the DOM but they'll run in the background crunching some numbers.

CSS3 transitions - Javascript library

Does somebody know a little Javascript librabry that will mimic CSS3 transitions for browsers like Firefox 3.6 or IE8?
Example:
-webkit-transition:left 1s ease-in;
I guess such a library is quite hard to develop.
These two support a lot but no CSS3 transitions:
CSSsandpaper
CSSPie
And then we have Modernizr but it only does feature testing.
The great thing about having an extra mini library for CSS3 transitions support is that you don't need to write your own backup code. You could just plug it in and be sure that those transitions work in most browsers.
YOu can try using JQuery animation to mimic the effect, but it still requires some coding. Nothing as simple as CSS3 code for transitions ;(
I was looking for the same library and didn't succeed, so I decided to create it.
Hope that's what you wanted - alevkon / smooth.
Recently I've open sourced a JavaScript library that may help your with your question. It and published under http://transitionjs.org
It allows you to quickly apply CSS transition on elements from JavaScript without editing your CSS. For example, to execute CSS transition you mentioned in your question you would simply write:
transitionjs.begin(element, 'left 0px 100px 1s ease-in');
note: you will need to provide the start and end values of the transition.

Resources