CSS3 animation: inherit property for keyframe at 0%

Question

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.

Answer 1

Hmmm, I have been looking into this problem for a little while and I don't think it is possible using CSS Animations. I've been trying with this JSFiddle a number of different things and running through tutorials about CSS Animations (seeing if anyone mentions the same issue) and also other information about it.

I did then come to the realization of what you are trying to accomplish and I think perhaps there is an easier solution. IF the locations are being dynamically calculated, I would assume you are indeed using some level of Javascript (or some crazy advanced CSS calc method) so I would at least think you would be setting the style of the DOM element with new left or top positions. While I'm not talking about jQuery animation, what you can do instead is use CSS3 Transitions in conjunction with Javascript. This means you get some of the benefits of CSS Animations like the computation being more native (hardware accelerated) as opposed to being done in Javascript but you do lose out on a few things.

Most importantly, there are no transition events for the browser like there is for CSS Animations nor can you have as fine-grain control over keyframes but you do get to work with it dynamically. I only suggest it as your question only refers to a keyframe of 0% and one of 100%.

The issue with what you were trying to do is that using CSS Animations needs to be static and won't pull the values that were currently set to do the animation (unlike transitions). When you are using inherit, you are actually trying to make it use the top and left etc. from it's parent.

Again, this doesn't meet your requirement of pure CSS but using CSS Transitions does mean only limited DOM manipulation via Javascript rather than what jQuery animate does.

Here is another JSFiddle using no jQuery (only very basic javascript to set a 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%;
}

Answer 2

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.