2023/6/7 (更新日:2024/3/15)

@keyframesを使ったanimationを@Mixinを使って使い回せるようにSassでコーディング

Program

アニメーションをCSSで作るのが煩雑に感じることはありませんか？

極力シンプルにアニメーションを作る方法を紹介します。

始めに、animationと@keyframesでアニメーションを作る基礎を説明します。

続いて、sassの便利機能：@mixinを使いアニメーションを簡単に使い回す方法を説明します。覚えると気軽に使える機能です。

@keyframesを使ったanimationを@Mixinを使って使い回せるようにSassでコーディング
css で使えるanimationの基礎
1. @keyframesの設定
2. animationの設定
@mixinをsassで設定する基礎
1. @mixinの使い方の基本型
2. @mixinの使い方の応用型
@mixinを使って使い回せるアニメーションを作ります
まとめ

１．@keyframesを使ったanimationを@Mixinを使って使い回せるようにSassでコーディング

cssを使って、アニメーションをコーディングするには、
「@keyframesの設定」と「animationプロパティの設定」が必要です。

@keyframesでは、アニメーションの時間的な動作（スタイル）が定義できます。

Animationプロパティでは、アニメーションの動き方を定義できます。

@keyframesとanimationプロパティを組み合わせると連続したアニメーションが実現します。

プログラムを分かりやすくするためにsassを使っていると思います。

その機能の一つに「@mixin」があります。

@mixinは、スタイルを定義しておいて別の場所で使い回す機能です。

「@keyframes」と「animation」「sassの@mixin」を組み合わせることで、余分な記入をせずアニメーションが使えます。

使い方を紹介していきます。

２．css で使えるanimationの基礎

アニメーションを作るには、

まずは、@keyframesでアニメーションの要素の動き（スタイル）を定義します。
要素の開始時点の状態、中間時点の状態、終了時点の状態を定義します。

次に、animationプロパティでアニメーションの動き（動作時間、開始時間、動作回数　等）を定義します。

2-1.@keyframesの設定

アニメーションの時間の変化に沿って要素のスタイルを定義することで、cssのアニメーションをコントロールしています。
中間地点の定義もできて、transitionよりも細かくコントロールできます。

基本構成

@keyframesはアットルールで、{　 }内にスタイルを定義します。

構造は、

@keyframes 　キーフレーム名 { 0%{スタイル定義}　中間のX%{スタイル定義}　100%{スタイル定義}　}

点で定義するため、連続にするために変化の過程は補完されます。

記述例

blockの幅を変えるキーフレーム名：example
スタイル変化：0% ⇒ 80% ⇒ 10% ⇒ 50% ⇒ 0%

@keyframes example{
  0% { Width: 0; }
  20% { Width: 80%; }
  40% { Width: 10%; }
  60% { Width: 50%; }
  80% { Width: 0; }
  100% {　Width: 0; }
}

2-2.animationの設定

animationプロパティに動作の時間、開始時間、動作回数等の設定をすることで、@keyframesで定義したスタイル順に、アニメーションが実現します。

animationプロパティの種類

プロパティ名	説明
animation-name	アニメーションの名前
animation-duration	アニメーションの動作時間
animation-timing-function	アニメーション変化の仕方
animation-delay	アニメーションを開始する遅れ時間
animation-iteration-count	アニメーションの繰り返し回数
animation-direction	アニメーションの再生方向
animation-fill-mode	アニメーションが再生されていないときの状態
animation-play-state	アニメーションの再生/一時停止を定義

2-3.アニメーションの構成

構造は、

.block{　⇒アニメーションを適用するクラス
　Animationプロパティ：example；⇒アニメーションスタイルを参照する
}

@keyframes example{　}　⇒スタイルの定義

棒が連続して3秒周期で収縮するアニメーション例

html

<div class="block"></div>

CSS

.block{
  background-color: teal;
  margin-top:50px;
  height:80px;
  width:0;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}

@keyframes example{
  0% { Width: 0; }
  20% { Width: 80%; }
  40% { Width: 10%; }
  60% { Width: 50%; }
  80% { Width: 0; }
  100% { Width: 0; }
}

コーディング結果

See the Pen アニメーション基礎 by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊animation,@keyframesの詳しい使い方は、こちらを参照ください。
Animationとkeyframesを使うと洒落たアニメーションをcssのみで実現できます。動きのあるページを作ろう

３．@mixinをsassで設定する基礎

「@mixin」は、類似のスタイルを最小限の設定を記述するだけで、色々な場所でスタイルを呼び出して使えるようにする機能です。

@mixinは、sassのファイルの中でのみ使える機能です。

3-1.@mixinの使い方の基本型

2つの機能が必要になります。

(1)スタイルを記述するパターン

@mixinで、類似のスタイルを記述して管理します。

構造は、

@mixin 　mixinの名前｛
　共通で参照したいスタイルを定義する記述
}

(2)スタイルを参照するパターン

@includeで、管理しているスタイルを参照して使います。

構造は、

スタイルを使いたいクラス名｛
　@include 　mixinの名前；
｝

「@mixinでアニメーションを作成したコード」
と「CSS変換後のコード」を掲載します。

html

<div class="title">
　タイトル
</div>

sass

//スタイルの定義

@mixin example{
　font-size:14px;
　padding:10px;
　background-color:red;
}

//スタイルを定義した@mixinを参照

.title{
　@include example;
}

html

<div class="title">
　タイトル
</div>

css

//スタイルの定義
//cssへ変換後のコード

.example-title{
　font-size:14px;
　padding:10px;
　background-color:red;
}

//@mixinを参照することでタイトルのスタイルを流用できます。

3-2.@mixinの使い方の応用型

参照するときに引数を使うと、定義したスタイルの一部を変更することができます。

(1)スタイルを記述するパターン

@mixin 　mixinの名前（$引数名：初期値）｛
　共通で参照したいスタイルを定義する記述
　変更したい引数：＄引数名；
}

※ただし、初期値は設定してもしなくても良い。

(2)スタイルを参照するパターン

スタイルを使いたいクラス名｛
　@include 　mixinの名前（変更したい値）；
｝

「@mixinでアニメーションを作成したコード」
と「CSS変換後のコード」を掲載します。

html

<div class="title">
　タイトル
</div>

sass

//スタイルの定義

@mixin example($size:14px){
　font-size:$size;
　padding:10px;
　background-color:red;
}

//スタイルを定義した@mixinを参照

//初期値を使う場合

.example-title{
　@include example;
}

//初期値を変える場合

.example-title{
　@include example(20px);
}

html

<div class="title">
　タイトル
</div>

⇒CSS変換結果

css

//スタイルの定義
//cssへ変換後のコード

//初期値を使う場合

.example-title{
　font-size:14px;
　padding:10px;
　background-color:red;
}

//初期値を変える場合

.example-title{
　font-size:20px;
　padding:10px;
　background-color:red;
}

４．@mixinを使って使い回せるアニメーションを作ります

四角いブロックが収縮するアニメーションを@mixinを使い作成します。

@keyframes, animation, @mixin, @include を使って作成します。

html

<body>
  <div class="square"></div>
</body>

squareクラスで収縮のアニメーションをします

sass@mixin の構造

@mixin animation(引数：初期値)｛animation:{引数名を定義,・・・・・}｝

@include animation(引数名：今回使用の値,・・・・・)

@keyframes animation関数名{0%{初期状態} 100%{最終状態}}

「@mixinでアニメーションを作成したコード」
と「CSS変換後のコード」を掲載します。

sass

@mixin animation($name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

.square {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius:10px;
  margin-top: 30px;
  background-color:teal;
  @include animation($name: sk-block,
  $duration: 1s,
  $timing-function: ease,
  $delay: 1s,
  $iteration-count: infinite,
  $direction: alternate-reverse
  // $fill-mode: both
  );
}

@keyframes sk-block {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

css変換結果

.square {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-top: 30px;
  background-color: teal;
  animation-name: sk-block;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-fill-mode: forwards;
}

@keyframes sk-block {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }

※使い回すには、

.squareの様なスタイルを適用するクラスに
@include animation{
以降の引数の値を変えて
使います。

コーディング結果（CSSへ変換後）

See the Pen mixin by Seiji Nakamura (@sjnkmr_777) on CodePen.

追記：@mixinの引数の書き方について

@mixin animation内のanimation:{ 　}の書き方について

[A]を[B]に置き換えても同じです。
[A]は、共通している animation 部をまとめた表現です。

[A]animationをまとめた書き方

animation: {
  name: $name;
  duration: $duration;
  timing-function: $timing-function;
  delay: $delay;
  iteration-count: $iteration-count;
  direction: $direction;
  fill-mode: $fill-mode;
  }

[B]省略しない書き方

animation-name: $name;
animation-duration: $duration;
animation-timing-function: $timing-function;
animation-delay: $delay;
animation-iteration-count: $iteration-count;
animation-direction: $direction;
animation-fill-mode: $fill-mode;