1

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}
4

1 に答える 1

0

コードを見やすくする方法を見つけることができませんでしたが、アニメーション自体から遅延とアニメーションを開始することはうまくいかないようなので、以下をまとめました。

@-webkit-keyframes animation {
   0% {
       opacity:1;
       -webkit-animation-timing-function: ease;
       -webkit-transform: translateY(0px);
   }
   18.75% {
       opacity:1;
       -webkit-animation-timing-function: ease-in;
       -webkit-transform: translateY(300px);
   }
   81.25% {
       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: 16s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: animation;
}

JSFiddle
このソリューションでは18.75%、 and81.25%を遅延のマーカーとして使用するだけで、その間 (10 秒) は何も変更しません。

于 2014-04-11T08:11:32.303 に答える