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

2018年1月16日CSSCSSアニメーション

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

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

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

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

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

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

スポンサーリンク

2018年1月16日CSSCSSアニメーション

Posted by Yousuke.U