ホームページ >ウェブフロントエンド >CSSチュートリアル >コマ送りアニメーション効果を実現するCSS3アニメーションについて
この記事では、フレームごとのアニメーション効果を実現するための CSS3 アニメーションを主に紹介します。興味のある方は参考にしてください。
CSS3 のアニメーション属性は、最近はほとんど使用しません。たまたまインタビューでそれについて聞かれたので、時間があるうちにアニメについて簡単にまとめてみます。同時に、演習としてフレーム単位のアニメーションのデモも実装します
アニメーション属性の概要
アニメーション属性がたくさんあるので、w3cで見るのはちょっと辛いので、簡単に作ってみました後で確認したい場合に一目瞭然です
アニメーションを使用してフレームごとのアニメーションを実現します
アニメーションのプロパティに慣れたら、次のことを見つける必要があります。それを実装するための単純な小さなプロジェクトです。フレームごとのアニメーションは非常に興味深いものです。最初に実行して満足してください。アイデアは非常に単純です。要素にスプライトの背景を与え、次にフレーム アニメーションを追加して背景を変更します。 -position キー コード:
@keyframes run{ from{ background-position: 0 0; } to{ background-position: -1540px 0 ; } } p{ width:140px; height:140px; background: url(run.png) ; animation-name:run; animation-duration:1s; animation-iteration-count:infinite; }
デフォルトでは、アニメーションは各キーフレームの間にトゥイーンアニメーションを挿入するため、アニメーション効果が一貫していることがわかります。
その理由がわかれば、解決するのは簡単です:
@keyframes run{ 0%, 8%{ /*动作一*/ } 9.2%, 17.2%{ /*动作二*/ } ... }step1。 : アクションは 8 フレーム滞在し、0% でアクション 1 が設定され、アクション 1 は 8% で終了します
ステップ 2: アクション間の移行は 1.2 フレームで、9.2% でアクション 2 が設定され、アクション 2 は 17.2% で終了します
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3逐帧动画</title> <style> @keyframes run{ 0%, 8%{ background-position: 0 0; } 9.2%, 17.2%{ background-position: -140px 0; } 18.4%, 26.4%{ background-position: -280px 0 ; } 27.6%, 35.6%{ background-position: -420px 0 ; } 36.8%, 44.8%{ background-position: -560px 0 ; } 46%, 54%{ background-position: -700px 0 ; } 55.2%, 63.2%{ background-position: -840px 0 ; } 64.4%, 72.4%{ background-position: -980px 0 ; } 73.6%, 81.6%{ background-position: -1120px 0 ; } 82.8%, 90.8%{ background-position: -1400px 0 ; } 92%, 100%{ background-position: -1540px 0 ; } } @-webkit-keyframes run{ 0%, 8%{ background-position: 0 0; } 9.2%, 17.2%{ background-position: -140px 0; } 18.4%, 26.4%{ background-position: -280px 0 ; } 27.6%, 35.6%{ background-position: -420px 0 ; } 36.8%, 44.8%{ background-position: -560px 0 ; } 46%, 54%{ background-position: -700px 0 ; } 55.2%, 63.2%{ background-position: -840px 0 ; } 64.4%, 72.4%{ background-position: -980px 0 ; } 73.6%, 81.6%{ background-position: -1120px 0 ; } 82.8%, 90.8%{ background-position: -1400px 0 ; } 92%, 100%{ background-position: -1540px 0 ; } } p{ width:140px; height:140px; background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ; animation:run 1s infinite; -webkit-animation:run 1s infinite; animation-fill-mode : backwards; -webkit-animation-fill-mode : backwards; } </style> </head> <body> <p></p> </body> </html>別の実装方法として、w3c では書かれていない、steps() を使用する方法があります。まずは画像を投稿しましょう
steps(1,end): このフレームの終わりまで 0% のスタイルを維持します(サイクル全体ではありません)
ステップ スタート エフェクトはsteps(1,start)と同等であり、ステップ エンド エフェクトは同等ですステップ(1,end)へ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3逐帧动画</title> <style> @keyframes run{ 0%{ background-position: 0 0; } 8.333%{ background-position: -140px 0; } 16.666%{ background-position: -280px 0 ; } 25.0%{ background-position: -420px 0 ; } 33.333%{ background-position: -560px 0 ; } 41.666%{ background-position: -700px 0 ; } 50.0%{ background-position: -840px 0 ; } 58.333%{ background-position: -980px 0 ; } 66.666%{ background-position: -1120px 0 ; } 75.0%{ background-position: -1260px 0 ; } 83.333%{ background-position: -1400px 0 ; } 91.666%{ background-position: -1540px 0 ; } 100%{ background-position: 0 0 ; } } @-webkit-keyframes run{ 0%{ background-position: 0 0; } 8.333%{ background-position: -140px 0; } 16.666%{ background-position: -280px 0 ; } 25.0%{ background-position: -420px 0 ; } 33.333%{ background-position: -560px 0 ; } 41.666%{ background-position: -700px 0 ; } 50.0%{ background-position: -840px 0 ; } 58.333%{ background-position: -980px 0 ; } 66.666%{ background-position: -1120px 0 ; } 75.0%{ background-position: -1260px 0 ; } 83.333%{ background-position: -1400px 0 ; } 91.666%{ background-position: -1540px 0 ; } 100%{ background-position: 0 0 ; } } p{ width:140px; height:140px; background: url(754767/201606/754767-20160601000042992-1734972084.png) ; animation:run 1s steps(1, start) infinite; -webkit-animation:run 1s steps(1, start) infinite; } </style> </head> <body> <p></p> </body>
CSS3 box-reflect を使用して反射効果を作成する方法
以上がコマ送りアニメーション効果を実現するCSS3アニメーションについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。