私はそれらのステップバイステップポスターの1つのイメージを持っています。私はポスターイメージ上の余分を隠すために別のdivに配置し、一度に1つのステップしか表示されません。複数のトランスフォームを使用する：同じ要素のtranslate（X、Y）
transform: translate(-23px, -40px);
transform: translate(25px, -165px);
transform: translate(5px, -325px);
transform: translate(-230px, -420px);
transform: translate(-442px, -325px);
transform: translate(-485px, -175px);
transform: translate(-440px, -40px);
transform: translate(-220px, -10px);
私はcss animateに精通していませんが、まだ非常に簡単でした。 @keyframesを使用して関数に名前を付け、変換を実行する割合を指定します。最後に、必要な機能を呼び出して、関数名、サイクル時間、サイクル数のプロパティでアニメーションを追加します。
@keyframes MARY-GO-ROUND{
0%, 100% {transform: translate(-23px, -40px);}
12% {transform: translate(25px, -165px);}
24% {transform: translate(5px, -325px);}
36% {transform: translate(-230px, -420px);}
48% {transform: translate(-442px, -325px);}
60% {transform: translate(-485px, -175px);}
72% {transform: translate(-440px, -40px);}
84% {transform: translate(-220px, -10px);}
}
img#image_go_round{
animation: MARY-GO-ROUND 20s infinite;
}
あなたは何をしようとしているのか、もっと具体的な例がありますか？これは、前方または後方のボタンをクリックしてその方向の画像を「スクロール」し、新しい画像を表示するものですか？ – Kurt
いいえ、それはいい考えです。私はテントの上の中心を持っていたテントのイメージを置く方法を取ったテントが崩壊した後、それを置くために2つのステップを時計の動きに入れ、次にボトムのセンターがそれを持ち、それが戻ってくるまでトップ。使用できなかったgifの代わりに、私はトランジションを使用するつもりでした。私は画像を保持するdivを作って、画像をdivより3倍大きくし（中央、左、右の1つ）、オーバーフローを隠しました。その後、私はちょうど1つのステップから次のステップへと移行しましたが、遷移をリストするだけでは機能しません –