How to make objects move with CSS?

Question

I have two images (objects) set side by side in the middle of the page and I want them to move toward each other as if they are going to collide and stop as they are placed beside each one.

So, for the object at the right side I have written the following code, thinking that the object should move from left to right, but the result is far from what I expect. Is it possible to do it by transition? what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want 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>

Solution 1

I have two images [...] what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want to collide.

Is it possible to do it by transition?

Yes it is - if I have understood your question correctly.

An important consideration with CSS transitions is that you should explicitly set the start-state and the end-state, so the browser is clear what it is transitioning between.

So... in the example you post in your question, it's important to state the translateX position for the images when :hover applies, but also when :hover doesn't apply.

That way, the browser can be clear what two translateX co-ordinates it is transitioning between.

Example:

#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>

---

Version 2 (move just once when the page loads)

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>

Solution 2

I'm not strong in javascript, so I generally lean on jQuery. If I were solving it with jQuery I'd decide when I wanted my animation to start then use this code to animate my element:

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

Here's an example that adds the class .animate when you click on the #axis element.

//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>

See this updated fiddle for one of the boxes moving into the middle: 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>