CSSアニメーションアニメーションの使い方のチュートリアル

プロジェクトが何であっても、フロントエンドで注意しなければならないことの 1 つは互換性であることは誰もが知っています。今日は互換性検証の問題についてお話します。

どのようなフロントエンド プロジェクトを行う場合でも、注意しなければならないことの 1 つは互換性であると認識しています。そこで、今日は互換性の検証が必要なブラウザについて詳しく説明します。

多くの Web ページで画像、Flash アニメーション、JavaScript を置き換えることができる強力な CSS3 を通じて、さまざまなアニメーションや特殊効果を作成できることがわかっています。今日は、CSS3 の @keyframes ルールを紹介します

CSS3 @keyframes。ルール

CSS3 でアニメーションを作成するには、@keyframes ルールを学ぶ必要があります。

@keyframes ルールはアニメーションの作成に使用されます。 @keyframes で CSS スタイルを指定することで、現在のスタイルから新しいスタイルに徐々に変化するアニメーション効果を作成できます。

それでは、Css アニメーションを使用して背景と位置を変更する方法のコードは次のとおりです:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

これらの事例を読んだ後、あなたは方法をマスターしたと思います。さらにエキサイティングなコンテンツについては、他の関連するコンテンツに注目してください。 PHP 中国語 Web サイトの記事をご覧ください。

関連書籍:

CSS3のtranslate属性の詳細な紹介

CSS3のbackground-size属性の詳細な紹介

CSS3関数のrotate()の使用方法

以上がCSSアニメーションアニメーションの使い方のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。