The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Keyframes and CSS calc() for position very odd

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #210177

    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?

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


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


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.