導入

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

アニメーション

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

基本的なアニメーション

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

Square

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

#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弾：色を変えながらマス目を移動！

そのために、同じ正方形を使用し、そのために別の @キーフレームを作成します。前と同じ手順を使用します

ステップ 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;

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

結論

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