CSSでアニメーションを作るにはどうすればいいですか？

導入

今日はアニメーションの作り方を説明します。この記事では、必要なアニメーション プロパティをすべて説明します。コードは私の github から入手できます。それでは始めましょう!!

アニメーション

アニメーションは、Web サイトの外観を向上させるために使用されるプロパティです。これはユーザーに良い干渉を与えるだけでなく、ウェブサイトの目標を人々に示すためにも使用されます。

基本的なアニメーション

最初のアニメーション: 正方形の色の変更

<div id="square">Square</div>

ここでは青色の正方形を作成し、いくつかのスタイルを与えます。どの色でも撮れます!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

今度はアニメーションを作成します。

ステップ 1: アニメーション @keyframes を作成する

アニメーションを作成するには @keyframes を設定する必要があります。特定の時点で要素にどのようなスタイルを与えるかを保持し、名前を付ける必要があります。私の場合は正方形の色を変更しています。そこで、名前の色を付けます。 @keyframes は
のように 2 種類で記述できます。

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

2 つのステップがあるアニメーションを実行したい場合は、往復を使用できます。または、
のようなパーセンテージ値を使用してそれを行うこともできます

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

パーセント値は、アニメーション内で複数のタスクを実行する必要がある場合に使用されますが、両方を使用することもできます。私は通常アニメーションにパーセンテージ値を使用します

ステップ 2: 正方形にアニメーション プロパティを設定します。

次に、広場上のプロパティをアニメーション化します。そのためにはアニメーションの特性について知る必要があります。主に使用されるものを説明します:

• animation-name - どの @keyframes を使用するかをブラウザーに伝えるために使用されます。私の場合、@keyframes の名前は color です。

• animation-duration - アニメーションがどのくらいの時間で終了するかを示すために使用されます。

• animation-iteration-count - 実行回数を指示するために使用されます。

アニメーションについて詳しくは、w3school または他の Web サイトで学ぶことができます。ここで、アニメーション プロパティを使用しますが、次のように 1 行で記述します。

    animation: color 4s infinite;

CSSのアニメーションには7つのプロパティがあります。アニメーション プロパティを 1 行で使用するには、まずアニメーション名 (color)、次にアニメーション期間 (この場合は 4 秒)、そしてアニメーション反復回数を無限に設定します。アニメーションを 1 回だけ使用したい場合は、それを 1 に設定できます。アニメーションプロパティの値を自分で設定することもできます。

さあ、あなたの四角形を見ると、その色が何度も変わります!では、色を変えながら動くマス目を作っていきます。

アニメーション第2弾：色を変えながらマス目を移動！

そのために、同じ正方形を使用し、そのために別の @keyframes を作成します。先ほどと同じ手順で進めていきます

ステップ 1: アニメーション @keyframes を作成する

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

ここでは、move という名前の @keyframes を作成し、このアニメーションには 3 つのステップを使用します。まず、左側を 0px と背景色に設定します。次に、50% で左を 300px に設定して背景色を変更し、最後に再び左を 0px に設定して、最初の位置に来るようにします。

ステップ 2: 正方形にアニメーション プロパティを設定します

    animation: move 4s infinite;

ここでは、animation-name を move に設定し、animation-duration を 4 秒に、animation-iteration-count を無限に設定します。ここでも、選択に従ってアニメーション値を設定できます。また、最初のアニメーション プロパティにコメントすることを忘れないでください。そうしないと問題が発生する可能性があります!

結論

投稿が長くなりすぎたので、続きは別の投稿にします。とりあえず今日はこれで十分です。ご理解いただければ幸いです。私はアニメーションに関するすべてのことを伝えるために最善を尽くしています。また、次の投稿をどのようなテーマで書けばよいかコメント欄で教えてください。読んでいただきありがとうございます!

以上がCSSでアニメーションを作るにはどうすればいいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。