Keyframes and CSS calc() for position very odd

[Shikkediel]

Strange… calculating a position with calc() inside a keyframe animation returns an unexpected result :

@keyframes an-arrow-b {
    0%   {left:110px; top:-220px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:110px; top:-220px;}
    100% {left: calc(50vw - 63px); top: -330px;}
}

For the last line, it is calculated at -13vw.

It also doesn’t matter what units are used. For example :

calc(50vw - 63em) will result to the same -13vw.

And calc(50% - 63vh) returns -13%.

What the… anybody know what’s going on there?

codepen.io/anon/pen/zvWReM

Happens with all browsers expect IE where is doesn’t seem to work at all.

[Paulie_D]

I’m pretty sure calc doesn’t work in keyframes for IE (not even Edge).

[Paulie_D]

If it’s related to this SO question:

http://stackoverflow.com/questions/33327425/is-it-possible-to-send-a-div-animation-to-the-top-right-corner-when-position-re?noredirect=1#comment54479745_33327425

The whole premise of the animation is wrong IMO.

[Shikkediel]

That whole setup makes no sense indeed, I’ve ‘advised’ a different approach altogether there. One that I am not willing to put together in any case for it to be likely ignored afterwards. But sometimes I can’t help myself from fiddling around with something like this anyway (just to maybe learn something myself) – and coming across that calc()issue because of it was unexpected. Especially since FF and Chrome seem to be doing the same.

[Author]

Posts