css - 如何在动画结束时旋转图标？

Question

我找到了以下示例 https://codepen.io/lonekorean/pen/vYLNpoY制作基本动画。但是如何在 @keyframes move 动画结束时旋转 @keyframes duck 动画中使用的图标。

.duck svg {
height: 100px;
}

.duck {
  animation: duck .2s linear infinite alternate;
}

.move {
    animation: move 10s linear infinite alternate;
}

@keyframes duck {
  from {
    transform: translateY(-7px);
  }
  to {
    transform: translateY(0px);    
    
  }
}
@keyframes move {
  from {
    transform: translateX(0) ;
  }

  to {    
    transform: translateX(400px) ;
  }
}

<div class="box move">
<div class="duck">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001" xml:space="preserve"><path d="M492.977 219.06c-11.854-6.513-25.73-6.081-37.119 1.151-32.916 20.896-79.957 30.239-136.975 27.373 12.867-20.341 19.778-43.956 19.778-68.435 0-70.739-57.551-128.291-128.29-128.291-67.26.002-122.524 51.371-127.858 117.721-10.914 10.909-37.836 34.276-71.473 38.288a12.521 12.521 0 0 0-7.725 20.921c1.592 1.727 37.457 39.74 105.634 39.738 2.705 0 5.468-.068 8.276-.192.526.556 1.044 1.121 1.58 1.667-19.416 20.845-30.445 48.099-30.664 76.66-.224 30.788 11.594 59.774 33.278 81.615 21.682 21.84 50.568 33.867 81.338 33.867h155.517c50.332 0 91.082-19.931 117.84-57.636C499.591 370.425 512 324.207 512 269.846v-18.648a36.671 36.671 0 0 0-19.023-32.138zM41.04 225.209c17.138-6.245 31.695-15.589 42.887-24.412a128.208 128.208 0 0 0 14.704 41.344c-25.533-1.704-44.748-9.525-57.591-16.932zm445.914 44.638c0 49.136-10.812 90.342-31.265 119.164-22.173 31.244-54.948 47.086-97.414 47.086H202.757c-24.045 0-46.62-9.399-63.563-26.467-16.946-17.07-26.182-39.723-26.006-63.781.199-25.927 11.87-50.51 32.015-67.442a12.528 12.528 0 0 0 4.465-9.678 12.516 12.516 0 0 0-4.605-9.612 103.705 103.705 0 0 1-13.091-12.79l-.005-.006c-16.028-18.66-24.854-42.515-24.854-67.17 0-1.628.035-3.11.113-4.625 2.423-55.299 47.73-98.618 103.148-98.618 56.928 0 103.243 46.315 103.243 103.244 0 26.306-9.92 51.373-27.934 70.583a12.521 12.521 0 0 0 7.868 21.026c72.976 7.425 133.734-2.74 175.735-29.401 5.133-3.261 9.843-1.328 11.629-.346 1.816.998 6.039 3.989 6.039 10.187v18.646z"/><path d="M302.82 374.732h-10.432c-6.915 0-12.523 5.607-12.523 12.524s5.607 12.524 12.523 12.524h10.432c6.916 0 12.524-5.607 12.524-12.524s-5.609-12.524-12.524-12.524zM425.577 324.05c-5.768-3.817-13.538-2.238-17.355 3.53-13.842 20.912-34.649 36.216-58.586 43.091-6.649 1.91-10.488 8.847-8.58 15.494 1.576 5.494 6.585 9.07 12.029 9.07 1.145 0 2.309-.158 3.464-.49 29.662-8.52 55.429-27.463 72.559-53.34 3.816-5.767 2.236-13.538-3.531-17.355zM179.087 126.365c-6.916 0-12.524 5.607-12.524 12.524v31.434c0 6.917 5.608 12.524 12.524 12.524s12.524-5.607 12.524-12.524v-31.434c0-6.917-5.608-12.524-12.524-12.524z"/></svg>
</div>
</div>

Answer 1

也许这就是你要找的东西？

.duck {
  width: 100px;
  height: 100px;
  animation: duck .2s linear infinite alternate;
}

.duck svg {
  width: 100px;
  height: 100px;
}

.duck-rotation {
  width: 100px;
  height: 100px;
  animation: duck-rotation 20s linear infinite;
  transform-origin: center;
}

.move {
  width: 100px;
  height: 100px;
  animation: move 10s linear infinite alternate;
}

@keyframes duck {
  from {
    transform: translateY(-7px);
  }

  to {
    transform: translateY(0px);    
    
  }
}

@keyframes duck-rotation {
  0% {
    transform: rotateY(180deg);
  }

  49% {
    transform: rotateY(180deg);
  }

  50% {
    transform: rotateY(0deg);
  }

  99% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(180deg);
  }
}

@keyframes move {
  from {
    transform: translateX(0) ;
  }

  to {    
    transform: translateX(400px) ;
  }
}

<div class="box move">
  <div class="duck-rotation">
    <div class="duck">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001" xml:space="preserve"><path d="M492.977 219.06c-11.854-6.513-25.73-6.081-37.119 1.151-32.916 20.896-79.957 30.239-136.975 27.373 12.867-20.341 19.778-43.956 19.778-68.435 0-70.739-57.551-128.291-128.29-128.291-67.26.002-122.524 51.371-127.858 117.721-10.914 10.909-37.836 34.276-71.473 38.288a12.521 12.521 0 0 0-7.725 20.921c1.592 1.727 37.457 39.74 105.634 39.738 2.705 0 5.468-.068 8.276-.192.526.556 1.044 1.121 1.58 1.667-19.416 20.845-30.445 48.099-30.664 76.66-.224 30.788 11.594 59.774 33.278 81.615 21.682 21.84 50.568 33.867 81.338 33.867h155.517c50.332 0 91.082-19.931 117.84-57.636C499.591 370.425 512 324.207 512 269.846v-18.648a36.671 36.671 0 0 0-19.023-32.138zM41.04 225.209c17.138-6.245 31.695-15.589 42.887-24.412a128.208 128.208 0 0 0 14.704 41.344c-25.533-1.704-44.748-9.525-57.591-16.932zm445.914 44.638c0 49.136-10.812 90.342-31.265 119.164-22.173 31.244-54.948 47.086-97.414 47.086H202.757c-24.045 0-46.62-9.399-63.563-26.467-16.946-17.07-26.182-39.723-26.006-63.781.199-25.927 11.87-50.51 32.015-67.442a12.528 12.528 0 0 0 4.465-9.678 12.516 12.516 0 0 0-4.605-9.612 103.705 103.705 0 0 1-13.091-12.79l-.005-.006c-16.028-18.66-24.854-42.515-24.854-67.17 0-1.628.035-3.11.113-4.625 2.423-55.299 47.73-98.618 103.148-98.618 56.928 0 103.243 46.315 103.243 103.244 0 26.306-9.92 51.373-27.934 70.583a12.521 12.521 0 0 0 7.868 21.026c72.976 7.425 133.734-2.74 175.735-29.401 5.133-3.261 9.843-1.328 11.629-.346 1.816.998 6.039 3.989 6.039 10.187v18.646z"/><path d="M302.82 374.732h-10.432c-6.915 0-12.523 5.607-12.523 12.524s5.607 12.524 12.523 12.524h10.432c6.916 0 12.524-5.607 12.524-12.524s-5.609-12.524-12.524-12.524zM425.577 324.05c-5.768-3.817-13.538-2.238-17.355 3.53-13.842 20.912-34.649 36.216-58.586 43.091-6.649 1.91-10.488 8.847-8.58 15.494 1.576 5.494 6.585 9.07 12.029 9.07 1.145 0 2.309-.158 3.464-.49 29.662-8.52 55.429-27.463 72.559-53.34 3.816-5.767 2.236-13.538-3.531-17.355zM179.087 126.365c-6.916 0-12.524 5.607-12.524 12.524v31.434c0 6.917 5.608 12.524 12.524 12.524s12.524-5.607 12.524-12.524v-31.434c0-6.917-5.608-12.524-12.524-12.524z"/></svg>
    </div>
  </div>
</div>