html css移动位置,html – 如何使用CSS移动对象？

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?

是的 – 如果我正确理解你的问题.

CSS转换的一个重要考虑因素是您应该明确设置启动状态和结束状态,这样浏览器就可以清楚地了解它之间的转换.

所以…在你在问题中发布的例子中,重要的是在以下情况下说明图像的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;

}

Hover over the green border box.

版本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);

}