ホームページ > 記事 > ウェブフロントエンド > css3アニメーションはソフトウェアですか？
css3アニメーションはソフトウェアですか？
- WBOYオリジナル
- 2022-06-23 16:02:031669ブラウズ
css3 アニメーションはソフトウェアではありません。CSS アニメーションは要素を 1 つのスタイルから別のスタイルに徐々に変更します。これは CSS と HTML 言語を通じて実現されます。CSS アニメーションの本質は、アニメーションのプロパティを 1 つのスタイルから徐々に変更できることです。値が別の値に変更されると、アニメーション属性をアニメーション属性と組み合わせて使用して、CSS アニメーション効果を実現できます。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 アニメーションはソフトウェアではありません
CSS は JavaScript や Flash を使用せずに HTML 要素をアニメーション化できます。 .
CSS アニメーションとは
アニメーションは、要素をあるスタイルから別のスタイルに徐々に変化させます。
CSS プロパティは好きなだけ変更できます。
CSS アニメーションを使用するには、まずアニメーションにいくつかのキーフレームを割り当てる必要があります。
キーフレームには、特定の時点で要素が持つスタイルが含まれます。
一部の CSS プロパティはアニメーション化可能です。つまり、アニメーションやトランジションに使用できます。
アニメーション化されたプロパティは、サイズ、数量、パーセンテージ、色など、ある値から別の値に徐々に変化します。
@keyframes ルール
@keyframes ルールで CSS スタイルを指定すると、アニメーションは特定の時間に現在のスタイルから新しいスタイルに徐々に変化します。 。
アニメーションを有効にするには、アニメーションを要素にバインドする必要があります。
次の例では、「サンプル」アニメーションを
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>
</body>
</html>出力:
(学習ビデオ共有: cssビデオ チュートリアル、html ビデオ チュートリアル)
以上がcss3アニメーションはソフトウェアですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。