Comment faire bouger les objets avec CSS?

Question

J'ai deux images (objets) placées côte à côte au milieu de la page et je veux qu'elles se déplacent l'une vers l'autre comme si elles devaient entrer en collision et s'arrêter lorsqu'elles sont placées à côté de chacune d'elles. Donc, pour l'objet du côté droit, j'ai écrit le code suivant, en pensant que l'objet devrait bouger de gauche à droite, mais le résultat est loin de ce que j'attends. Est-il possible de le faire par transition? Ce que je veux c'est que l'un des objets commence à bouger du côté gauche et que l'autre commence à bouger de la droite et se rencontre au centre comme s'ils voulaient entrer en collision.

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

Answer 1

J'ai deux images [...] ce que je veux, c'est que l'un des objets commence à bouger du côté gauche et que l'autre commence à partir de la droite et se rencontre au centre comme s'il voulait entrer en collision.

Est-il possible de le faire par transition?

Oui, c'est - si j'ai bien compris votre question.

Une considération importante avec CSS transitions est que vous devez définir explicitement l'état de démarrage et l'état final, afin que le navigateur sache clairement à quoi il effectue la transition.

Alors ... dans l'exemple que vous publiez dans votre question, il est important de préciser la position translateX pour les images lorsque :hover applique, mais aussi quand :hover ne joue pas. De cette façon, le navigateur peut voir clairement à quoi correspondent les deux coordonnées translateX en cours de transition.

Exemple:

#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 (il suffit de déplacer une fois quand la page se charge)

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>

Answer 2

Je ne suis pas fort en javascript, donc je généralement maigre sur jQuery. Si je résous avec jQuery je décide quand je voulais que mon animation pour commencer à utiliser ensuite ce code pour animer mon élément:

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

Voici un exemple qui ajoute la classe .animate lorsque vous cliquez sur l'élément #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>

Voir ce violon mis à jour pour l'une des boîtes de déménagement dans le milieu: 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>