From current style CSS3 Animation - css

Question

I have a problem and the answer I found are not precise enough.
I have 2 DIV. A div at left:-100%; and a div at left:100%;
I would like in ONE animation, animate those div to smoothly go from their actual Left, to left:0%;
i tried adding just
.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%;
}
}
But this brake all steps on animation. I mean, after 0.5s my div go from actual left to 0%;
So, is there a way to say
#keyframes anim {
from{
left:current%;
}
to {
left: 0%;
}
}
Thx for help
EDIT : The ABOVE code should work. So my problem come from another part of the code...
This is what i do basically : https://jsfiddle.net/Crocsx/rwyt400n/

Answer 1

Answer based on the JSFiddle provided in comment by the author.
This is not a very good answer because I only have an hypothesis about the problem, however I have a solution.
The problem, I think, is that the value of left after the animation is "virtual". When you start the second animation (by putting the class "slide_to_right") it look at the real value which is still 100%, even though you see it as 0%, and start the animation from this point (that's why it is not animated from 0%).
Because you are using JS to change the state of the elements, instead of using animations, you can use transitions. It will allow your element to be animated automatically when changing between the 2 states and it is easier to set in this case (less code).
Thanks to this property, all you have to do is set the transition property on your sliding element. And then change its state in JS. In this case you want to alternate between left:100% and left:0%. So the transition property is written like this : transition: left 5s;.
To set the different left values, you can directly change the style in JS. Or have a class prepared in your css and add this class to your element. In this case, 2 classes .left and .right work great.
The transition will take care of the animation.
Here is the code : https://jsfiddle.net/rwyt400n/4/ (I changed the id to classes).

Answer 2

I think this is what you're looking for:
#-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);
}
}
you can specify a css property value that you want the animation to begin with, and end with. you can also split this keyframe into more than just 0% and 100%.
For ex.
#keyframes dropHeader {
0% {
transform: translateY(-100px);
}
25% {
transform: translateY(-75px);
}
50% {
transform: translateY(-50px);
}
75% {
transform: translateY(-25px);
}
100% {
transform: translateY(0);
}
}

Answer 3

See this 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;
}
}