CSS - currentwidth + px

Question

有没有办法只在CSS中获取目标对象的当前宽度？

我正在搞乱动画，这对于这样的功能真的很有帮助。

示例：

/*What has to be done atm*/

@keyframes identifier {

  0%{width: 50px}
  25%{width: 100px}
  50%{width: 150px}
  75%{width: 200px}
  100%{width: 250px}

}

/*What I would like*/

@keyframes identifier {

  0%{width: currentwidth +50px}
  25%{width: currentwidth +50px}
  50%{width: currentwidth +50px}
  75%{width: currentwidth +50px}
  100%{width: currentwidth +50px}

}

使用最后一段代码，实际上只需要重复一次，我想要这么多次，这可能吗？

Answer 1

这是我第一次尝试SCSS中的变量和循环，因此可能有更好的方法。 https://codepen.io/mcoker/pen/Zyydvw

HTML：

<div>foo</div>

SCSS：

$width: 0;
$percent: 0;
$increment: 50;

div {
  animation: identifier 5s forwards;
  background: red;
}

@keyframes identifier {

  @while $percent < 101 {
    #{$percent}% {
      width: calc(#{$width}px + #{$increment}px);
    }
    $width: $width + $increment;
    $percent: $percent + 25;
  }

}

编译为

div {
  animation: identifier 5s forwards;
  background: red;
}

@keyframes identifier {
  0% {
    width: calc(0px + 50px);
  }
  25% {
    width: calc(50px + 50px);
  }
  50% {
    width: calc(100px + 50px);
  }
  75% {
    width: calc(150px + 50px);
  }
  100% {
    width: calc(200px + 50px);
  }
}

<div>foo</div>