「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない

構文

「anim1」「anim2」は同時進行
・anim1の後にanim2が実行されるのではない

@keyframes anim1{

  0%{プロパティ:値;}

  100%{プロパティ:値;}

}

@keyframes anim2{

  0%{プロパティ:値;}

  100%{プロパティ:値;}

}

.クラス名{

	animation-name:anim1,anim2;

}

%指定の進行制御は、キーフレームアニメーション毎に異なっていても良い

@keyframes anim1{

  0%{プロパティ:値;}

  50%{プロパティ:値;}

  100%{プロパティ:値;}

}

@keyframes anim2{

  0%{プロパティ:値;}

  100%{プロパティ:値;}

}

.クラス名{

	animation-name:anim1,anim2;

}

正常動作しない例

「異なるキーフレームアニメーション名」に、同じプロパィ名を指定できない
・「transformの異なる値」を記述できない
・指定した場合、後に書いた指定は無視される


回転だけ実行される例

@keyframes anim1{

  0%{transform:rotate(0deg);}

  100%{transform:rotate(360deg);}

}

@keyframes anim2{

  0%{transform: scale(1);}

  100%{transform: scale(2.5);}

}

.クラス名{

	animation-name:anim1,anim2;

}

拡大のみ実行される例

@keyframes anim1{

  0%{transform:rotate(0deg);}

  100%{transform:rotate(360deg);}

}

@keyframes anim2{

  0%{transform: scale(1);}

  100%{transform: scale(2.5);}

}

.クラス名{

	animation-name:anim2,anim1;

}

---

正常動作する例

「同じプロパティ名の異なる値」は、「同じキーフレームアニメーション名」で指定

@keyframes anim1{

  0%{transform:rotate(0deg) scale(1);}

  100%{transform:rotate(360deg) scale(2.5);}

}

.クラス名{

	animation-name:anim1;

}

「異なるプロパティ名」なら、さらに別の「キーフレームアニメーション名」で指定可能

@keyframes anim1{

  0%{transform:rotate(0deg) scale(1);}

  100%{transform:rotate(360deg) scale(2.5);}

}

@keyframes anim2{

  0%{opacity:0.0;}

  100%{opacity:1.0;}

}

.クラス名{

	animation-name:anim1,anim2;

}