CSS3 animation: inherit property for keyframe at 0%
animation, css, inheritance
Solution
An update for anyone who lands on this thread. According to MDN omitting the 0% / from selector would have the desired behaviour. https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Valid keyframe lists If a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.
Problem
I have following problem: I want to use CSS3 animation with keyframe rules (@keyframes myname {}) Problem is, I want to use SINGLE at-rule keyframe animation for multiple elements, but these elements have different position each. So, @keyframes animation should inherit original properties of selector at 0% (or from {}) rule, so animation would originate at original position and size of selector. like this one: ``` @keyframes myanim { 0% { left: inherit; top: inherit; width:inherit; height:inherit; } 100% { top: 50%; left:50%; width: 100%; height: 60%; } } ``` And 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; } ``` Goal is to get original properties of each selector, put them to 0% keyframe as originating position and size and animate to 100% with same properties for every selector. Is this possible or I have to create animation for each selector? Problem is, that I wouldn't know their position as it's going to be dynamically calculated. Please, no jQuery solution, just pure CSS3 one! I DON't want to use jQuery animate method.