この記事では、フレームごとのアニメーション効果を実現するための 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 ,start): アニメーションは、このフレームの最初から最後まで 100% にジャンプします (サイクル全体ではありません)
steps(1,end): このフレームの終わりまで 0% のスタイルを維持します(サイクル全体ではありません)
アニメーション タイミング関数を直接設定することもできます: step-start/step-end
ステップ スタート エフェクトは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>ログイン後にコピー
以上がこの記事の全内容です。皆様の学習に役立つことを願っています。関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
関連する推奨事項:
CSS3 box-reflect を使用して反射効果を作成する方法
CSS でのアニメーション属性の使用方法について
以上がコマ送りアニメーション効果を実現するCSS3アニメーションについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
