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

Question

我想从当前位置开始动画（第一次）。openAnimation 从 A 点到 B 点，closeAnimation 从 B 点到 A 点。所以，在页面加载时，动画应该在 B 点。但是当我第一次更改类时, 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类选择器更改属性，它将看起来很糟糕。

Answer 2

我把这个放在 jsfiddle 上。仅限 Chrome/Safari，直到您添加更多供应商前缀或选择使用 prefixfree.js 或其他选项。

.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;
}
@-webkit-keyframes openAnimation {
      0% {
            -webkit-transform: translateX(0px);
      }
      100% {
            -webkit-transform: translateX(300px);
      }
}
@-webkit-keyframes closeAnimation {
      0% {
        -webkit-transorm: translateX(300px);
      }
      100% {
        -webkit-transform: translateX(0px);
      }
}

http://jsfiddle.net/LtJLc/