HTML5 と Css3 を使用してアニメーション バナーを作成していますが、現時点では回避策が見つからない問題がいくつかあります。
例として使用する簡単なコードを次に示します。これが、画像が割り当てられた div レイヤーであると想像してください。
まず不透明度です。タイムライン アニメーションの最後まで機能し、その後再び表示されます。これを回避する CSS の方法はありますか、それとも JavaScript を使用する必要がありますか?
次にトランジションの遅延です。キーフレームの遅延を実行して、各トランジションの間に数秒間フリーズできると思いましたが、効果がありません。誰かが助けてくれるなら、私はそれを賞賛します!
@-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
50% {
-webkit-transition-delay:10s;
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation
}
まず遅延コマンド、Transition-delay と animation-delay です。
** * ** * *アップデート* ** * ** * ** * **
不透明度が解決されました。アニメーションの後に終了するには、最初のフレーム 0% を不透明度 0 に設定します。問題がある場合は、フレームを 1% に設定し、不透明度 1 に設定します。
次に、アニメーションの最後にフォワードを追加します。
#bannerImg {
-webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out forwards}