Fatal编程技术网
  • javascript/
  • Javascript 同一对象上不同动画的单独属性

Javascript 同一对象上不同动画的单独属性

javascript jquery html css animation

Javascript 同一对象上不同动画的单独属性,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,我正在尝试使用以下代码将两个轮子图像相互移动： HTML: 现在的问题是，我希望两个轮子都朝着对方移动，在中心相遇（碰撞），当旋转继续时，运动应该停止。但是我已经将动画重复设置为无限，因为我想要轮子无限旋转。我能通过使用CSS实现我想要的吗？如果不是，javascript的替代方案是什么？另外，如何在CSS中将一个动画设置为重复，另一个动画设置为仅发生一次？尝试在div中包装图像，并将第二个动画应用于包装div。在动画速记（）中包含向前（用于动画填充模式），以使元素保持其最终位置（而不是重置为

我正在尝试使用以下代码将两个轮子图像相互移动：

HTML:

现在的问题是，我希望两个轮子都朝着对方移动，在中心相遇（碰撞），当旋转继续时，运动应该停止。但是我已经将动画重复设置为无限，因为我想要轮子无限旋转。我能通过使用CSS实现我想要的吗？如果不是，javascript的替代方案是什么？另外，如何在CSS中将一个动画设置为重复，另一个动画设置为仅发生一次？

尝试在div中包装图像，并将第二个动画应用于包装div。在
动画
速记（）中包含
向前
（用于
动画填充模式
），以使元素保持其最终位置（而不是重置为初始位置）

更新：

根据您下面关于车轮应该碰撞的评论，我将禁用
浮动
并按
边距
定位，而改为按
绝对
定位。请注意（如果我理解您的要求），可能需要通过
calc（）
来说明
到
的位置，这是一种较新的技术，但主要受支持（）。此外，您的图像文件包含填充，您可能希望在图像编辑器中裁剪填充，或者可以在CSS中反转填充

工作演示（刷新页面以重复动画）：

CSS:

HTML:

<body>

  <div class="translateLeft">
    <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

  <div class="translateRight">
    <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

</body>

<body>  

  <div class="translateLeft">
    <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

  <div class="translateRight">
    <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

</body>
问题是，代码工作得很完美，谢谢。但当我们使用左边距和右边距来移动图像时，图像实际上并不重叠。当它们相互靠近时，我将图像与重叠部分对齐。只有到那时它们才会碰撞。我已经根据我认为你在这里描述的内容更新了上面的内容… 
@-webkit-keyframes translationLeft {
  from { left: 0%; }
  to   { left: calc(50% - 170px); }
}

@-webkit-keyframes translationRight {
  from { right: 0%; }
  to   { right: calc(50% - 170px); }
}

@-webkit-keyframes rotationLeft {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(359deg); }
}

@-webkit-keyframes rotationRight {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(-359deg); }
}

body {
  background: #fff;
}

img {
  width: 200px;
}

.translateLeft {
  -webkit-animation: translationLeft 2s linear forwards;
  position: absolute;
  margin: -18px;
}

.translateRight {
  -webkit-animation: translationRight 2s linear forwards;
  position: absolute;
  margin: -18px;
}

.leftwheel {
  -webkit-animation: rotationLeft 2s infinite linear;
}


.rightwheel {
  -webkit-animation: rotationRight 2s infinite linear;
}

<body>

  <div class="translateLeft">
    <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

  <div class="translateRight">
    <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

</body>

<body>  

  <div class="translateLeft">
    <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

  <div class="translateRight">
    <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

</body>

@-webkit-keyframes translationLeft {
  from { margin-left: 0; }
  to   { margin-left: 25%; }
}

@-webkit-keyframes translationRight {
  from { margin-right: 0; }
  to   { margin-right: 25%; }
}

@-webkit-keyframes rotationLeft {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(359deg); }
}

@-webkit-keyframes rotationRight {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(-359deg); }
}

body {
  background: #fff;
}

img {
  width: 200px;
}

.translateLeft {
  -webkit-animation: translationLeft 2s linear forwards;
}

.translateRight {
  -webkit-animation: translationRight 2s linear forwards;
}

.leftwheel {
  float: left;    
  -webkit-animation: rotationLeft 2s infinite linear;
}


.rightwheel {
  float:right;
  -webkit-animation: rotationRight 2s infinite linear;
}