CSSアニメーションに入門するのでメモ

りゅうおうのおしごとの空銀子先生の誕生日を調べたら9月9日だったので、何かやりたいと思い、yui540さんが由比ヶ浜結衣の誕生日サイトを作ってたのを思い出した。

由比ヶ浜結衣生誕2018 - 非公式サイト

これを見て我も作りたい！と思ったので、CSSアニメーションにとりあえず入門するぞい。

とりあえずMDN読んどけばいいだろうということで、ここをヨミヨミしてメモをこれから書きます。

CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN

余談ですが、CSS アニメーションでググるとドキュメントより先にQiitaが出てSEO強っ！って思いました。

CSSアニメーション概要

CSSアニメーションは２種類の要素で構成されている

アニメーションについて記述するスタイル
アニメーションの始めとと終わりのCSSスタイルを示すキーフレーム

animationプロパティ

CSSアニメーションの流れを作成するには要素にanimationプロパティを設定する。 animationプロパティは外見を指定するのもではなく、アニメーションをどのようにすすめるかを設定するためのものです。

animationプロパティは値を複数指定して、アニメーションのシーケンスの詳細を指定しますが、それぞれにどのような意味があるのかを覚えるのが大変そうです。

なので、animation-nameやanimation-durationなどのサブプロパティを見て、どのような流れを指定できるのかを知るのが良いと思います。

一つ一つの説明をこのブログで書くのは無駄なので公式ドキュメントをぱぱっと見てください。1分位で読めるかと

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Configuring_the_animation

キーフレーム

アニメーションの外見を定義しなければ、animationプロパティで指定してきたことを無駄です！なので学んでいきましょう

これは例を見ればどのようなものか分かると思います。 pタグが画面を横切るようなアニメーションです。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

これの応用で頑張ればいろいろなアニメーションが表現できるかと思います！

ポートフォリオサイトにアニメーションを組み込んで遊んでみたので良かったら見てください。 https://k-nasa.me/