CSS Keyframes: How to move div to certain position - css

Question

I have a div I want to move to a certain position (say [200,200]) when I add the class remove. I have a lot of divs from different places and I want them to meet at [200,200].
.remove { -webkit-animation: swoopOut 2s 1 ease forwards; }
#-webkit-keyframes swoopOut {
0% {position: relative; left: 0px; top: 00px; opacity: 1}
80% {position: absolute; left: 200px; top: 200px; opacity: 1}
100% {position: absolute; left: 200px; top: 200px; opacity: 0}
}
When I use top/left, it moves relative (200 down, 200 right) though I want absolute (to [200,200]). I've tried position: absolute but that won't work.
Any help?
EDIT: I've tried to make an example in fiddle where I want the two boxes to meet at 150,50. What can I do?

Answer 1

Lot of divs? With CSS, I'm pretty sure it's not possible without a keyframe rule for each element. With JS, however:
window.onload = function() {
TweenLite.to(document.getElementsByClassName("box"), 1, {
top: 50,
left: 150,
onComplete: function() {
TweenLite.to(this.target, 0.2, {
opacity: 0,
onComplete: function() {
TweenLite.set(this.target, {
opacity: 1
});
this.restart();
}.bind(this)
});
}
});
};
body {
margin: 0px;
}
#container {
position: relative;
}
.wrapper {
/*position: relative;*/
width: 100px;
height: 100px;
border: 1px solid black;
}
.meet {
position: absolute;
top: 50px;
left: 150px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<div id="container">
<div class="wrapper">
<div class="box"></div>
</div>
<div class="wrapper">
<div class="box"></div>
</div>
<div class="meet"></div>
</div>
Here's with CSS only but with multiple keyframe and animation rules.
body {
margin: 0px;
}
#container {
position: relative;
}
.wrapper {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
}
.meet {
position: fixed;
top: 50px;
left: 150px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
}
.box1 {
-webkit-animation: boxOne 1s infinite;
}
.box2 {
-webkit-animation: boxTwo 1s infinite;
}
#-webkit-keyframes boxOne {
0% {
left: 0px;
top: 0px;
opacity: 1
}
80% {
left: 150px;
top: 50px;
opacity: 1
}
100% {
left: 150px;
top: 50px;
opacity: 0
}
}
#-webkit-keyframes boxTwo {
0% {
left: 0px;
top: 0px;
opacity: 1
}
80% {
left: 150px;
top: -50px;
opacity: 1
}
100% {
left: 150px;
top: -50px;
opacity: 0
}
}
<div id="container">
<div class="wrapper">
<div class="box box1"></div>
</div>
<div class="wrapper">
<div class="box box2"></div>
</div>
<div class="meet">
</div>
</div>