ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーションでフレーム単位のアニメーション効果を実装するサンプル紹介
CSS3アニメーションでフレーム単位のアニメーション効果を実装するサンプル紹介
- 高洛峰オリジナル
- 2017-03-09 17:11:001522ブラウズ
この記事では主にフレーム単位のアニメーション効果を実現するための 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%{ /*动作二*/ }
...
}
ステップ1。 : アクションは中間の 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>
別の実装方法があります。それは、フレーム間のステップアニメーションであるsteps()を使用することです。これは、w3cでは書かれていません
からわかるように、上の図: 
steps(1,end): フレームの最後まで 0% のスタイルを維持します。このフレーム (サイクル全体ではありません)
アニメーション タイミング関数を直接設定することもできます: step-start/step-end
ステップ スタート エフェクトはsteps(1,start)と同等であり、ステップ エンド エフェクトはは、steps(1,end) と同等です
最終的な効果は、記録の問題によるものです。少し行き詰まっているかもしれません。興味のある学生は、コードを直接コピーして実行できます。以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、Duoduo が PHP 中国語 Web サイトをサポートすることを願っています。
以上がCSS3アニメーションでフレーム単位のアニメーション効果を実装するサンプル紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。