CSSキーフレーム

アニメーションの作成はCSSで簡単に行えます。そして楽しい部分は、サードパーティのフレームワークやプラグインを必要としないことです。

@keyframes CSSルールは、これらのアニメーションを作成するために必要なツールです。

@keyframes 構文

@keyframesはCSSのルールです。 At-rulesは、CSSがどのように動作するかを示します。 @ viewport、@supportsなどの他の多くのat-rulesがあります。

次の構文で@keyframesルールを定義します。

@keyframes <name> {
    from {
    /* start details here */
    }

    to {
    /* end details here */
    }
}

キーワードの代わりにパーセンテージを指定することで、より洗練されたアニメーション宣言を取得できます。

@keyframes <name> {
  0% { }
  50% { }
  100% { }
}

注 ：新しく作成したキーフレームを使用するには、animation-name の値として追加する必要があります。 財産。 animation-durationを設定することもできます 宣言された@keyframesアニメーションの期間を指定します。

魔法のボールの例

先に進んで、魔法のボールを出現させたり消滅させたりしましょう。迷子になった場合は、付属のCodepenを参照してください。

最初に行う必要があるのは、アニメーションを定義することです。マジックボールと名付けます：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

@keyframes magic-ball {
  from {
    background-color: limegreen;
  }
  to {
    background-color: blueviolet;
  }
}

ここでは基本的に背景色をライムグリーンからブルーバイオレットに変更しています。これはどの要素にも適用できますが、先に進んで円に適用します。

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

忘れないでください キーフレームアニメーションを機能させるには、animation-name の値として追加する必要があります。 プロパティを設定し、animation-durationを使用してアニメーションの長さを秒単位で設定します 。

このアニメーションで、ボールが現れたり消えたりします！＆＃128165;

フラッシュセールの例

先に進んで、別のアニメーションを作成しましょう。今回は、正方形をアニメートして、動く効果を作成します。アニメーションにmoveInという名前を付けます。この場合、パーセンテージを使用します。

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

不透明度はほとんど私たちの透明性です。したがって、この新しく作成されたアニメーションを正方形に適用できます

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

ほんの少しで素晴らしい効果を達成したことがわかります！

結論

アニメーションに関するCSSドキュメントを読むことで、アニメーションの旅を続けることができます。また、継続時間を使用してアニメーションを洗練する1つの方法のみを参照したことにも注意してください。見る価値のあるアニメーションサブプロパティは他にもたくさんあります！

最後に、すべてのプロパティをアニメーション化できるわけではないことに注意してください。アニメーション化されたプロパティのこの網羅的なリストを見てください。