How to move objects using CSS?

Question

I have two images (objects) located next to each other in the middle of the page, and I want them to move towards each other, as if they collide and stop when they are placed next to each.

So, for the object on the right side, I wrote the following code, believing that the object should move from left to right, but the result is far from what I expect. Can this be done by transition? I want one of the objects to start moving on the left side, and the other to start moving on the right and meet in the center, as if they wanted to collide.

.one {
  border: 3px solid #73AD21;
  position: absolute;
}
.two {
  top: 45%;
  left: 44%;
}
.left1,
.right2 {
  float: left;
}
#axis:hover .move-right {
  transform: translate(-350px, 0);
  -webkit-transform: translate(-350px, 0);
  -o-transform: translate(-350px, 0);
  -moz-transform: translate(-350px, 0);
}
.object1 {
  position: absolute;
  transition: all 2s ease-in;
  -webkit-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  -o-transition: all 2s ease-in;
}

<div id="axis" class="one two">
  <img class="object1 left1 move-right" src="http://placehold.it/50x50" />
  <img class="object2 right2 move-left" src="http://placehold.it/75x75" />
</div>

Run codeHide result

Answer 1

[...], , , , , .

?

, - .

CSS transitions , , , .

... , , translateX , :hover, , :hover .

, , translateX .

:

#axis {
border: 3px solid #73AD21;
position: absolute;
top: 45%;
left: 44%;
}

#axis img {
float: left;
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
}

#axis .move-left {
transform: translateX(200px);
-webkit-transform: translateX(200px);
-o-transform: translateX(200px);
-moz-transform: translateX(200px);
}

#axis .move-right {
transform: translateX(-200px);
-webkit-transform: translateX(-200px);
-o-transform: translateX(-200px);
-moz-transform: translateX(-200px);
}


#axis:hover .move-left, #axis:hover .move-right {
transform: translateX(0px);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
}

p {
font-weight:bold;
}

<p>Hover over the green border box.</p>

<div id="axis">
<img class="move-right" src="http://placehold.it/50x50" />
<img class="move-left" src="http://placehold.it/75x75" />
</div>

Hide result

---

2 ( )

function initialiseAxisImages() {
var axis = document.getElementById('axis');
var axisImages = axis.getElementsByTagName('img');

axisImages[0].classList.remove('move-right');
axisImages[1].classList.remove('move-left');
}

window.addEventListener('load', initialiseAxisImages, false);

#axis {
border: 3px solid #73AD21;
position: absolute;
top: 45%;
left: 44%;
}

#axis img {
float: left;
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
}

#axis .move-left {
transform: translateX(200px);
-webkit-transform: translateX(200px);
-o-transform: translateX(200px);
-moz-transform: translateX(200px);
}

#axis .move-right {
transform: translateX(-200px);
-webkit-transform: translateX(-200px);
-o-transform: translateX(-200px);
-moz-transform: translateX(-200px);
}

<div id="axis">
<img class="move-right" src="http://placehold.it/50x50" />
<img class="move-left" src="http://placehold.it/75x75" />
</div>

Hide result

Answer 2

javascript, jQuery. jQuery, , , , :

$('#axis .move-right').addClass('animate');

, .animate #axis.

//binds an anonymous function to the 'click' event on #axis
$('#axis').on('click',function(){ 

  //adds your 'animation' class that triggers the CSS animation
  $('#axis .move-right').addClass('animate');

});

.one {
  border: 3px solid #73AD21;
  position: absolute;
}
.two {
  top: 45%;
  left: 44%;
}
.left1,
.right2 {
  float: left;
}
#axis .move-right.animate {
  transform: translate(-350px, 0);
  -webkit-transform: translate(-350px, 0);
  -o-transform: translate(-350px, 0);
  -moz-transform: translate(-350px, 0);
}
.object1 {
  position: absolute;
  transition: all 2s ease-in;
  -webkit-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  -o-transition: all 2s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="axis" class="one two">
  <img class="object1 left1 move-right" src="http://placehold.it/50x50" />
  <img class="object2 right2 move-left" src="http://placehold.it/75x75" />
</div>

Hide result

, : https://jsfiddle.net/fuce0x67/

//binds an anonymous function to the 'click' event on #axis
$('#axis').on('click',function(){ 

  //adds your 'animation' class that triggers the CSS animation
  $('#axis .move-right').addClass('animate');

});

.one {
  border: 3px solid #73AD21;
  position: absolute;
}
.two {
  top: 45%;
  left: 44%;
}
.left1,
.right2 {
  float: left;
}
#axis .move-right { //removed animate class from here. This is now the 'default' (pre-animation) position for this element
  transform: translate(-350px, 0);
  -webkit-transform: translate(-350px, 0);
  -o-transform: translate(-350px, 0);
  -moz-transform: translate(-350px, 0);
}

#axis .move-right.animate {//added this block to reset the positions to ~center like I think you want
  transform: translate(-70px, 0);
  -webkit-transform: translate(-70px, 0);
  -o-transform: translate(-70px, 0);
  -moz-transform: translate(-70px, 0);
}

.object1 {
  position: absolute;
  transition: all 2s ease-in;
  -webkit-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  -o-transition: all 2s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="axis" class="one two">
  <img class="object1 left1 move-right" src="http://placehold.it/50x50" />
  <img class="object2 right2 move-left" src="http://placehold.it/75x75" />
</div>

<p>
click on the box in the center to activate animation
</p>

Hide result