css - 如何从当前位置开始一个 css 动画

Question

我想从当前位置开始动画(第一次)。
openAnimation 从 A 点到 B 点， closeAnimation 从 B 点到 A 点。
所以，在页面加载时，动画应该在 B 点。
但是当我第一次更改类(class)时，div 从 A 点开始。

@-webkit-keyframes openAnimation
  0%
    -webkit-transform: translateX(300px)
  100%
    -webkit-transform: translateX(0px)

@-webkit-keyframes closeAnimation
  0%
    -webkit-transform: translateX(0px)
  100%
    -webkit-transform: translateX(300px)

在 .open 类中

-webkit-transform-origin: 100% 50%
-webkit-animation: openAnimation 1s both ease-in

在 .close 类中

-webkit-transform-origin: 100% 50%
-webkit-animation: closeAnimation 1s both ease-in

第一次看不到动画怎么办？

Answer 1

您可能想要 transition ，不是 animation .例如，参见 http://jsfiddle.net/g9dn1a09/
基本上你想要以下CSS:

.box {
    transition: transform 1s;
}

.close {
    transform: translateX(300px);
}

.open {
    transform: translateX(0px);
}

请注意，您要 transition使用始终应用的选择器定义。如果您更改属性 transition使用 .close或 .open过渡(动画)中间的类选择器看起来很糟糕。