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

我把它放在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/

Answer 2

您可能想要transition，而不是animation。例如，请参阅http://jsfiddle.net/g9dn1a09/

基本上你想要关注CSS：

.box {
    transition: transform 1s;
}

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

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

请注意，您希望使用始终应用的选择器定义transition。如果您在transition或.close类中更改.open，则转换（动画）中间的情况会显得很糟糕。

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

2 个答案: