CSS3 animation: inherit property for keyframe at 0%

Question

I have the following problem: I want to use CSS3 animation with keyframe rules (@keyframes myname {})

The problem is that I want to use the SINGLE at-rule keyframe animation for multiple elements, but these elements have different positions. Thus, the @keyframes animation must inherit the original properties of the selector with the rule 0% (or from {}), so the animation would have arisen in the original position and size of the selector.

like this:

@keyframes myanim { 0% { left: inherit; top: inherit; width:inherit; height:inherit; } 100% { top: 50%; left:50%; width: 100%; height: 60%; } } 

And the selector:

 .myselector-one { top:10em; left:0em; width:10em; height:5em; animation: myanim 1s; } .myselector-two { top:20em; left:30em; width: 15em; height: 8em; animation: myanim 1s; } 

The goal is to get the initial properties of each selector, put them in a 0% keyframe as the initial position and size, and animate up to 100% with the same properties for each selector.

Is this possible, or do I need to create an animation for each selector? The problem is that I do not know their position, since it will be dynamically calculated.

Please not a jQuery solution, just pure CSS3! I DO NOT want to use jQuery's animation method.

Answer 1

Hmmm, I was looking for this problem a bit and I don’t think it is possible with CSS Animations. I try with this JSFiddle several different things and run through tutorials on CSS animations (if someone mentions the same problem), as well as other information about this .

Then I came to the realization of what you are trying to achieve, and I think that perhaps there is an easier solution. If the locations would be dynamically computed, I would suggest that you really use some level of Javascript (or some crazy crazy advanced CSS calc method), so I would at least think that you would set the style of the DOM element with a new left or top . Although I'm not talking about jQuery animations, you can use CSS3 Transitions instead in conjunction with Javascript instead. This means that you get some of the benefits of CSS animation, such as computing, which is more native (hardware acceleration), rather than in Javascript, but you will lose a few things.

Most importantly, there are no transition events for the browser , for example, for CSS animations , and you cannot control small fonts over key frames, but you can work with it dynamically. I suggest this only because your question only relates to a key frame of 0% and one of 100% .

The problem with what you're trying to do is that using CSS animations should be static and will not pull out the values ​​that are currently set for the animation (as opposed to transitions). When you use inherit , you are actually trying to use its top and left , etc. from this parent .

Again, this does not meet your requirement for pure CSS, but using CSS Transitions means only limited manipulation of the DOM through Javascript, not what iQuery aimate does.

Here is another JSFiddle without using jQuery (only very simple javascript to set the class or inline styles) and CSS transitions.

HTML

 <div class="myselector-one" id="a">Click Me</div> <div class="myselector-two" id="b">Click Me</div> 

Javascript

 document.getElementById("a").onclick = function() { if (this.className.indexOf("animate-complete")!=-1) { this.className = this.className.replace(/animate\-complete/g,""); } else { this.className += " animate-complete"; } } var bIsTransitioned = false; document.getElementById("b").onclick = function() { if (!bIsTransitioned) { this.style.top = "50%"; this.style.left = "50%"; this.style.width = "100%"; this.style.height = "60%"; } else { this.style.top = ""; this.style.left = ""; this.style.width = ""; this.style.height = ""; } bIsTransitioned = !bIsTransitioned; } 

CSS

 .myselector-one { top:10em; left:0em; width:10em; height:5em; transition:all 2s; background-color:#ffaa99; position:absolute; } .myselector-two { top:4em; left:30em; width: 15em; height: 8em; transition:all 2s; background-color:#aaff99; position:absolute; } .animate-complete { top: 50%; left:50%; width: 100%; height: 60%; }