同一對象上不同動畫的單獨屬性

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。 在animation速記（ https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode ）中包括前forwards （針對animation-fill-mode ），以使元素保持其最終位置（而不是重置為初始位置）。

更新：

根據您在下面的評論中，車輪應該發生碰撞，我將floats和定位位置設置為margin ，而將位置設置為absolute 。 請注意（如果我了解您想要的內容），則可能需要使用calc()來聲明to位置，這是較新的技術，但大多數情況下都受支持（ 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 個解決方案

解決方案1
1 已采納 2014-07-18 06:51:33

同一對象上不同動畫的單獨屬性

問題描述

1 個解決方案

解決方案1 1 已采納 2014-07-18 06:51:33

解決方案1
1 已采納 2014-07-18 06:51:33