从当前样式CSS3动画

我有一个问题，我发现的答案不够精确。从当前样式CSS3动画

我有2个DIV。左边的div：-100％;左边是div：100％;

我想在一个动画，动画这些div顺利地从他们的实际左侧，向左：0％;

我尝试添加只是

.animSlide{ 
    animation-duration: 0.5s; 
    animation-iteration-count: 1; 
    animation-timing-function: linear; 
    animation-fill-mode: forwards; 
    animation-name: anim; 
} 
@keyframes anim { 
    to { 
     left: 0%; 
    } 
}

但这刹车上动画的所有步骤。我的意思是，在0.5s后，我的div从实际的左转变为0％;

那么，有没有办法说

@keyframes anim { 
    from{ 
     left:current%; 
    } 
    to { 
     left: 0%; 
    } 
}

THX的帮助

编辑：上面的代码应该工作。因此，从代码的另一部分来我的问题...... 这是我做的基本上是：https://jsfiddle.net/Crocsx/rwyt400n/

来源

2015-08-15 Crocsx

“我的意思是，在0.5秒之后，我的div从实际的左边走到了0％”是不是你想要的？这正是你所拥有的CSS所做的，并且是预期的方法。你观察到的行为如何不符合你的期望？ – BoltClock

我希望它从当前位置滑动到0％随着时间的推移。所以在0秒它是在当前后0.25秒在50％的距离等.... 这里它只是从0.5当前位置到0％没有任何平稳过渡 – Crocsx

默认情况下，如果你没有设置动画中的'from'状态，它应该从元素的当前位置开始。所以如果我正确地理解你想要的是默认行为，那么其他地方一定有问题。这是你想要的行为：https://jsfiddle.net/wsj920ck/（红色来自外部，左边）。编辑：@Crocsx我没有看到你的评论，在我的例子中是否有同样的问题？ – yhoyhoj

答案基于笔者在评论中提供的JSFiddle。

这不是一个很好的答案，因为我只有一个关于这个问题的假设，但是我有一个解决方案。我认为问题在于动画后的left的值是“虚拟的”。当你开始第二个动画时（通过放置类“slide_to_right”），它会查看仍然为100%的实际值，即使您将其看作0%，并从此处开始动画（这就是为什么它不是从0开始动画的原因％）。

因为您使用JS来更改元素的状态，而不是使用动画，所以可以使用transitions。它可以让你的元素在两种状态之间切换时自动生成动画，并且在这种情况下更容易设置（更少的代码）。
感谢这个属性，你所要做的就是在滑动元素上设置transition属性。然后在JS中改变它的状态。在这种情况下，您想要在left:100%和left:0%之间切换。所以转换属性是这样写的：transition: left 5s;。

要设置不同的左值，可以直接在JS中更改样式。或者在你的css中准备一个类并将这个类添加到你的元素中。在这种情况下，2类.left和.right工作很好。
过渡将照顾动画。

这里是代码：https://jsfiddle.net/rwyt400n/4/（我改变了ID为类）。

来源

2015-08-15 20:49:56 yhoyhoj

Thx目前我将采取工作解决方案^^ 如果我找到它为什么不起作用或解决我的小提琴的方法将会让你更新^^ thx再次为您的时间;） – Crocsx

我认为这是你在找什么：

@-moz-keyframes dropHeader { 
    0% { 
     -moz-transform: translateY(-100px); 
    } 
    100% { 
     -moz-transform: translateY(0); 
    } 
} 
@-webkit-keyframes dropHeader { 
    0% { 
     -webkit-transform: translateY(-100px); 
    } 
    100% { 
     -webkit-transform: translateY(0); 
    } 
} 
@keyframes dropHeader { 
    0% { 
     transform: translateY(-100px); 
    } 
    100% { 
     transform: translateY(0); 
    } 
}

你可以指定一个css您希望动画开始的属性值，并以。结尾。你也可以将这个keyframe分成不止0%和100%。

例如，

@keyframes dropHeader { 
    0% { 
     transform: translateY(-100px); 
    } 
    25% { 
     transform: translateY(-75px); 
    } 
    50% { 
     transform: translateY(-50px); 
    } 
    75% { 
     transform: translateY(-25px); 
    } 
    100% { 
     transform: translateY(0); 
    } 
}

来源

2015-08-15 19:13:46 SuperVeetz

看到这个fiddle。

HTML：

<div class="wrapper"> 
<div class="div1"></div> 
<div class="div2"></div> 
</div>

CSS：

.wrapper { 
    height: 200px; 
    width: 100px; 
    margin-left: 100px; 
} 
.div1 { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
    left: -100%; 
    animation: anim 5s; 
} 
.div2 { 
    width: 100px; 
    height: 100px; 
    background: black; 
    position: relative; 
    left: 100%; 
    animation: anim 5s; 
} 
@keyframes anim { 
    to { 
     left: 0; 
    } 
}

来源

2015-08-15 19:16:46

这完美地工作。我的代码就是这样。我认为我在做什么有一个不同的问题：3 – Crocsx

从当前样式CSS3动画

回答

相关问题