【CSSアニメーション】ひとつの要素に複数のキーフレームを追加

2017年12月4日2019年6月12日CSS,CSSアニメーション

ひとつの要素に2つのキーフレームの定義するのにメモ

animation:で定義を2つ書くと上書きになってしまいますが、ひとつの要素に複数のアニメーションキーフレームを定義するのはカンマ区切りで良いのですね

.sample{
animation: key1 5s infinite, key2 1s infinite;
}

これで、こっちは形状や位置、こっちは色とか２つの時間軸で要素をアニメーションさせる事ができますね、わーい

@keyframes key1{
  0% {}
  25% {}
  50% {}
  75% {}
  100% {}
}

@keyframes key2{
  0% {}
  25% {}
  50% {}
  75% {}
  100% {}
}

animationプロパティ関連はこちら

【CSS】animationプロパティ一覧

CSSでアニメーションを定義する時に使うanimationプロパティのメモです 個別プロパティの指定値と初期 ...

 https://naruhodo.repop.jp/css-animation-property/