Question

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

HTML：

<body>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>  
</body>

CSS：

body{
background:#fff;
}
body > img{
width:200px;
}

.leftwheel {
    float:left;    
    -webkit-animation: rotationLeft 2s infinite linear;
    animation: rotationLeft 2s infinite linear;
  -moz-animation: rotationLeft 2s infinite linear;
}
@-webkit-keyframes rotationLeft {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);margin-left:25%;}
}
@-moz-keyframes rotationLeft {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);margin-left:25%;}
}
@keyframes rotationLeft {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);margin-left:25%;}
}

.rightwheel {
    float:right;
    -webkit-animation: rotationRight 2s infinite linear;
    animation: rotationRight 2s infinite linear;
  -moz-animation: rotationRight 2s infinite linear;
}
@-webkit-keyframes rotationRight {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);margin-right:25%;}
}
@-moz-keyframes rotationRight {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);margin-right:25%;}
}
@keyframes rotationRight {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);margin-right:25%;}
}

DEMO

现在的问题是，我希望两个车轮朝向彼此移动，在中心相遇（碰撞）并且在旋转仍然继续时机芯应该停止。但是我已经将动画重复设置为无限，因为我想要轮子的无限旋转。我可以通过使用CSS实现我想要的吗？如果没有什么是javascript替代品？另外，我如何设置一个动画重复，其他动画只在CSS中发生一次？

Answer 1

尝试将图像包装在div中，并将第二个动画应用于包装div。在forwards简写（https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode）中加入animation-fill-mode（animation），以使元素保持其最终位置（而不是重置为其初始位置）。

更新：

根据您下面的评论，轮子应该碰撞，我会修改floats并按margin定位，而是按absolute定位。请注意（如果我理解你想要的话），to位置可能需要calc()来说明，这是一种较新的技术，但大多数都支持（http://caniuse.com/#search=calc）。此外，您的图像文件包含填充，您可能希望在图像编辑器中裁剪，或者您可以在CSS中反转。

工作演示（刷新页面以重复动画）：http://jsbin.com/jifup/4

CSS：

@-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;
}

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>

以前的答案：

工作演示（刷新页面反复查看动画）：http://jsbin.com/jifup/1

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>

CSS：

@-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;
}

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

1 个答案: