CSSで作るアニメーション

2023/10/13

みなさん、こんにちは！京都事業所受託プロダクトチームインターン生の肖かえいです😆
今日はCSSでアニメーションを作る方法について書いていこうと思います。
この時使用されるプロパティは@keyframesというものです。

使用の流れとしては
１．対象のクラスを決める
２．keyframesでアニメーションの動きをきめる
３．animation:プロパティを対象クラスに記入する
となります。

@keyframesの書き方としてはアニメーションの開始と終了の動きを順番に指定していく形になります。

@keyframes fadeInAnime {
0%{
/*ここに開始のCSSを記述*/
}
100%{
/*ここに終了のCSSを記述*/
}
}

0%が開始の状態、100％が終了の状態を指定します。その途中経過を例えば20%という形で追加で指定可能です。
アニメーションといえば難しそうなイメージがありますが、CSSのみで簡単に実装できるのはすごいですね！！
---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------