如何从当前位置开始启动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

第一次不想看到动画，我应该怎么做？

- mtoninelli

Answer 1

你可能想使用 transition，而不是 animation。例如，请参见 http://jsfiddle.net/g9dn1a09/

基本上，你需要以下CSS：

.box {
    transition: transform 1s;
}

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

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

请注意，您希望使用始终应用的选择器定义过渡。如果在过渡（动画）的中间使用.close或.open类选择器更改过渡属性，则会显得不好看。

- Mikko Rantalainen

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/

- Mark

---

是的，我只使用-webkit来在Chrome上进行测试。感谢您将其放在jsfiddle上。正如您所看到的，如果我们添加close类，黑色正方形从右侧开始。我该如何强制它从当前位置开始？ - mtoninelli

我的意思是，如果你从<div class="box"></div> 开始，正方形在左边。 如果你添加了类“close”，动画将从右边开始。我该怎么做才能强制它从当前点（左边）开始，并向左移动（在这种情况下只需停留）？ - mtoninelli

只需从box div中删除“close”即可。http://jsfiddle.net/LtJLc/1/。我在快速设置时添加了它。 - Mark

也许我没有解释清楚 :) 手动添加“close”类并单击“RUN”后，正方形框从右侧开始向左移动。我想要的是它不要从右侧开始移动，因为它已经在最终位置了，只需保持原地即可。你明白我的意思吗？ - mtoninelli

好的，所以你想让你的结束位置在右边，基本上是反过来的？如果我理解正确的话，也许只需要反转.open/.close CSS类。http://jsfiddle.net/LtJLc/3/。可能还需要调整'click'样式顺序。 - Mark