javascript - CSS动画-当前用CSS表示的“左”

我是CSS动画的新手，我正在尝试隐藏显示器右侧的组件。我有一个width: window.innerWidth - 60风格的React组件。这是用JavaScript设置的（显然）。 -60，因为该组件的一部分应该是可见的，并且单击该部分时，我想将组件向左滑动以显示整个组件。问题是，我不知道如何设置动画参数，因为我需要说：“从具有+ 200px的值开始”。

@-webkit-keyframes showonrightaside {
    from {
      left: currentValue;
    }
    to {
      left: currentValue + 200px;
    }
}

我不知道如何表达它应该从当前值开始并增加left属性。这有可能还是我必须做一些JavaScript？

谢谢！

最佳答案

我将这个JSFiddle放在一起，以详细说明我以前的评论。
它使用了翻译属性：

transform:translateX(200px);

为了确保它可以在尽可能多的浏览器中运行并且还可以面向未来，请使用供应商前缀：

-webkit-transform:translateX(200px); // chrome and safari
-moz-transform:translateX(200px); // mozilla firefox
-ms-transform:translateX(200px); // internet explorer
-o-transform:translateX(200px); // opera
transform:translateX(200px); // regular

关于javascript - CSS动画-当前用CSS表示的“左”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26861502/