☰

左から右へのCSSアニメーション 質問する

tag-icon • tag-icon html css animation
左から右へのCSSアニメーション 質問する

でアニメーションを作成しようとしていますCSS。オンラインでいくつかの例を読みましたが、何が間違っているのかわかりません...ジャガイモの画像を左から右に移動し、向きを変えて再び左側に戻したいのですが、おそらくコードで何かを間違えたのでしょうか? 何が間違っているのか、または代わりにこの問題にどのように対処すればよいのか、何かアドバイスはありますか?

これが私のコードです:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    right: 0;
  }
  100% {
    left: 0;
    , webkit-transform: scaleX(-1);
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

(MOS、Safari、Opera のユーザーの方はごめんなさい)https://jsfiddle.net/oxc12av7/

ベストアンサー1

この質問は依然として多くの注目を集めており、どの解決策も私が求めていた完全な答えを提供していないため、数年前に私がどのように解決したかの例を挙げます。

まず、他の多くの質問で示されているように、アニメーションを左から右に動かします。

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

この解決策だけでは、ジャガイモが右に行き過ぎて、向きを変える前にビューポートから押し出されてしまうという問題があります。Taig さんの提案どおり、transform: translate解決策を使用できますが、50% { left: calc(100% - potatoWidth); }

2 番目は、アニメーションがビューポートから押し出されずに左から右に進むようにします。

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% { 
    left: calc(100% - 100px); 
   }
  100% {
    left: 0;     
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

そして最後に、質問でも尋ねたように、ジャガイモを回転させます。そのためには、y 軸の周りの変換を変更する必要があります。

50% のときだけ向きを変えるようにすると、移動しながらゆっくりと向きを変えることになるので注意してください。したがって、ジャガイモが の位置にどのくらいいるかを指定する必要があります-webkit-transform: rotateY(0deg);。この例では、ジャガイモはアニメーションの 48% まで向きを変えず、その後 48% から 50% の範囲で向きを変えることができます。

3 番目は、ジャガイモが後ろに動かないように、各コーナーで回転するようにします。

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    left: calc(100% - 100px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    left: 0;    
     -webkit-transform: rotateY(0deg);
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

おすすめ記事