css3アニメーションはソフトウェアですか？-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

css3アニメーションはソフトウェアですか？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 23, 2022 pm 04:02 PM

css3

css3 アニメーションはソフトウェアではありません。CSS アニメーションは要素を 1 つのスタイルから別のスタイルに徐々に変更します。これは CSS と HTML 言語を通じて実現されます。CSS アニメーションの本質は、アニメーションのプロパティを 1 つのスタイルから徐々に変更できることです。値が別の値に変更されると、アニメーション属性をアニメーション属性と組み合わせて使用して、CSS アニメーション効果を実現できます。

css3アニメーションはソフトウェアですか？

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 アニメーションはソフトウェアではありません

CSS は JavaScript や Flash を使用せずに HTML 要素をアニメーション化できます。 .

CSS アニメーションとは

アニメーションは、要素をあるスタイルから別のスタイルに徐々に変化させます。

CSS プロパティは好きなだけ変更できます。

CSS アニメーションを使用するには、まずアニメーションにいくつかのキーフレームを割り当てる必要があります。

キーフレームには、特定の時点で要素が持つスタイルが含まれます。

一部の CSS プロパティはアニメーション化可能です。つまり、アニメーションやトランジションに使用できます。

アニメーション化されたプロパティは、サイズ、数量、パーセンテージ、色など、ある値から別の値に徐々に変化します。

@keyframes ルール

@keyframes ルールで CSS スタイルを指定すると、アニメーションは特定の時間に現在のスタイルから新しいスタイルに徐々に変化します。。

アニメーションを有効にするには、アニメーションを要素にバインドする必要があります。

次の例では、「サンプル」アニメーションを

要素にバインドします。アニメーションは 4 秒間続き、

要素の背景色が「赤」から「黄色」に徐々に変わります:

<!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>

出力:

css3アニメーションはソフトウェアですか？