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

我想从当前位置开始动画（第一次）。 openAnimation从A点移到B点，closeAnimation从B点移动到A点。因此，在页面加载时，动画假设位于B点。但是当我第一次更改类，股利从A点如何从当前位置开始一个css动画

@-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)

开始的。开类

-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

我能做些什么首次看不到动画？

来源

2014-01-22 ehijon

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

来源

2014-01-22 16:13:10 Mark

是的男人，我只使用-webkit只是为了测试它在铬上。感谢您将它放在jsfiddle上。正如你可以从黑色方块中看到的那样，如果我们添加近距离类，就从右边开始。我该如何强制它从当前位置开始？ – ehijon

我的意思是，如果您从

开始，广场位于左侧。并且如果您添加了类“close”，则动画从右侧开始。我该如何强制它从当前点开始（左），然后转到（在这种情况下只留下）在左侧？ – ehijon

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

你可能想transition，不animation。例如，看到http://jsfiddle.net/g9dn1a09/

基本上你想下面的CSS：要transition与始终应用于选择定义

.box { 
    transition: transform 1s; 
} 

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

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

注意。如果您在.close或.open类中更改transition，则转换（动画）情况的中间看起来很糟糕。

来源

2017-05-02 06:04:48

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

回答

相关问题