CSSアニメーションの備忘録

CSSアニメーションを、しばらく使ってないと忘れてしまう😂

アニメーションとトランジション

アニメーションは、スタイル設定を変化させることができ、「繰り返しの設定」や「開始前・終了後の状態の設定」もできます
キーフレーム（@keyframes）に、アニメーションの流れを設定します

トランジションは、状態が変化するとき（例えば「ホバーされたとき」や「フォーカスが当たったとき」「JavaScriptのイベントが発生したとき」など）に「どのように変化するか」を設定します
「繰り返しの設定」や「開始前・終了後の状態の設定」はできません

アニメーションとトランジションのプロパティです

アニメーション

1. アニメーションさせたい要素に、「animation:で一括指定」または「プロパティを1つずつ設定」
2. キーフレーム（@keyframes）でアニメーションの流れ（アニメーション可能なプロパティと値）を設定します

/*
アニメーションさせたい要素（p）に
animation-nameとanimation-durationを一括指定 
*/
p {
  animation: 3s traffic-light;
}

/*
キーフレーム
0%（開始）は color: blue
50%（中間）は color: yellow
100%（終了）は color: red
*/

@keyframes traffic-light {
  0% {
    color: blue;
  }
  50% {
    color: yellow;
  }
  100% {
    color: red;
  }
}

アニメーションのプロパティ

備考「animation-direction」の設定別、「animation-fill-modeのforwards 」で適応されるキーフレーム
（繰り返し方別のアニメーションの最後の状態は？）

• normal：最後のキーフレームは、100%（to）
• reverse：最後のキーフレームは、0% （from）
• alternate 偶数：最後のキーフレームは、0%（from）
• alternate 奇数：最後のキーフレームは、100% （to）
• alternate-reverse 偶数：最後のキーフレームは、100% （to）
• alternate-reverse 奇数：最後のキーフレームは、 0% （from）

備考「animation-direction」の設定別、「animation-fill-modeのbackwards」で適応されるキーフレーム
（繰り返し方別、アニメーションの最初の状態って？）

• normal または alternate：最初のキーフレームは、0% （from）
• reverse または alternate-reverse：最初のキーフレームは、100% （to）

繰り返しごとに開始を遅らせる場合
＊あくまでanimation-delayは1回目の開始を遅らせるだけ

keyframesで何も行わない時間を作ります
止まる時間も含めたアニメーション全体に対する止まる時間の割合だけズラす
2秒アニメーションして1秒まつ場合1/3×100で約33
0%と同じ設定を33%から始めます

アニメーションのプロパティを設定

「animationプロパティ」で、一括指定（省略されたプロパティは「初期値」が設定されます）
＊①name ②duration ③timing ④delay ⑤iteration ⑥direction ⑦fill ⑧play

animation: hoge 3s ease-in 1s infinite reverse both running;

各プロパティの初期値

• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none
• animation-play-state: running

複数の値も設定できます
「複数のアニメーションに共通の設定」「複数のアニメーションに別々の長さや繰り返し回数など」を適用したい時に便利
＊「設定された値の個数」がプロパティで異なるときは、それぞれのプロパティで「値」はローテーションされます

/* 一つの規則 */
animation-name: hoge1, hoge2, hoge3;
animation-duration: 2.5s;
animation-iteration-count: 2;

/* 別々の長さや繰り返し回数 */
animation-name: hoge1, hoge2, hoge3;
animation-duration: 2.5s, 5s, 3s;
animation-iteration-count: 2, 1, 3;

キーフレーム

• 「 animation-nameプロパティ」で指定したものと同じ名前がついた「@keyframes」を作成します
  ＊同じ名前が複数あるときは、最後に宣言されたものが使用されます
• 「0% { }」はアニメーション開始時の状態
  「100% { }」はアニメーション終了時の状態
  中間の状態も、複数「%」で設定できます
  また、「0%はfrom」「100%はto」と書くことができます
• 「0%（from）」が設定されていないときは「既存のスタイル」が開始時の状態です
  「100%（100%）」が設定されていないときは「既存のスタイル」が終了時の状態です
• 「アニメーション可能なCSSのプロパティ」を、複数指定することができます

/* 
animation-nameにhogeを指定
*/
p{
  background:red;
  animation: hoge 10s linear forwards;
}
/* 
hogeに対して
アニメーション可能なプロパティ
opacityとwidthを設定
*/
@keyframes hoge {
  0%{
    opacity:0;
    width: 0%;
  }
  50%{
    opacity:1;
    width: 100%;
  }
  100%{
    opacity:0;
    width: 0%;
  }
}

トランジション

トランジションは、「要素」の「状態が変わるとき」の変化を定義するためのものです
「状態が変わるとき」とは、例えば「ホバーされたとき」「フォーカスが当たったとき」「JavaScriptのイベントが発生したとき」などです

1. 「要素」に「transition:で一括指定」または「プロパティを1つずつ設定」
2. 「状態が変化した時の要素」に、スタイルを設定します

/* 
buttonクラスがついた「要素」に
transition-property
transition-duration
transition-timing-functionを一括指定 
*/
.button {
  color: #fff;
  background-color: #333;
  transition: all 1s ease-out;
}

/* 
buttonクラスがついた「要素」が
ホバーされた（状態が変化した時の要素）ときの
色と背景色を設定
*/
.button:hover{
  color: #333;
  background-color: #fff;
}

トランジションのプロパティ

＊アニメーションの「duration・timing-function・transition-delay」と同じです

「timing-functionのcubic-bezier」の値は、「Chromeの開発者ツール」で確認できます

1. 

   「timing-function」を設定した要素に表示される「アイコン」をクリックします

2. 

参考

アニメーション可能なプロパティ（MDN）

transformプロパティ

追記
translate、rotate、scaleをプロパティとして独立して指定できる（IE非対応）
それぞれのブラウザの対応
https://caniuse.com/mdn-css_properties_translate
https://caniuse.com/mdn-css_properties_scale
https://caniuse.com/mdn-css_properties_rotate

アニメーション可能なCSS のプロパティはたくさんありますが、「transformプロパティ」は特によく利用され、パフォーマンスの観点からも推奨されます
「transformプロパティ」は「回転」「拡大縮小」「傾斜」「移動」することできます
＊インライン要素は対象外なので<span>タグなどはdisplay:inline-blockを設定する

transform:<transform関数>の値　を設定します
transform関数の値は、「半角スペース区切り」で複数設定もできます
＊ちなみにtransform: none;は「何も適用しない」です

.box{
transform:rotate(90deg) translate(200px) 
}

（余談）「transformを設定した要素」の 「子要素でz-indexが効かなかい」ときは、「transformを設定した要素」が「z-index:0;」の扱いになっていることが原因です
詳しくは、重ね合わせコンテキスト

transform関数

• 「X軸」横方向、起点から「左方向はマイナス」「右方向はプラス」
• 「Y軸」縦方向で、起点から「上方向はマイナス」「下方向はプラス」
• 「Z軸」奥行きで、起点から「奥はマイナス」「手前はプラス」

2D

translate(X, Y)・translateX・translateY・translateZ

rotate・rotateX・rotateY・rotateZ

scale(sx, sy)のイメージ、かなりあやふや💦
＊XとY両方を利用する機会はないような…

3D

CSS 3D（Transform）を実装する時の参考に

3Dでは
親要素に対してperspective: 数値px;設定します
transform-style: preserve-3d;を設定すると
perspective-originを設定できます
＊perspective-originはユーザーの視点を変更できます（斜めから画面を見るなど）

「perspectiveの値」は、例えば500pxであれば、ユーザーが画面から500px離れた位置にいます
画面の原点はz=0です
要素がz軸に対して、500pxより大きな値で変形した場合は、ユーザーを通り越してしまい「要素は表示されません」

対象要素に「transform関数のperspective(数値px)」を設定することもできます（例　transform: perspective(800px);　）

「perspectiveプロパティ」は「親要素」に設定
「transform関数のperspective()」は「要素自体」に設定します

transform-originプロパティ

transform: rotate()を使うときの参考

transform-originは、rotate（回転）の回転の中心点を変更することができます
scaleやskewXの原点にもなります
＊transform-originを設定しないときは、「要素の中央」を中心に回転します

transform-origin:（X方向の値 Y方向の値）を設定します
（「マイナス」や「％」でも設定できます）
＊値が1つのときは、Y方向は「center」とみなされます
2Dの回転では要素の左上を起点（0 0）として値を設定します

また、「top・ bottom・ left・ right ・center」といったキーワードがつかえます

上の画像の青い点を中心に回転するとき

transform-origin: 100px 100px;

余談「transform」などで、「ベンダープレフィクス」が必要な場合があります

＊「ベンダープレフィクス」とは、「一部のプロパティや値の機能を動作させる」ために必要な「そのプロパティや値の先頭につけるブラウザごとの印」です
「一部のプロパティや値の機能」とは、各ブラウザが先行実装している「CSS3で採用される予定の機能」です

「VS Code」の拡張機能「Autoprefixer」で「ベンダープレフィクス」をつける方法

1. 実行したいファイル上で「Shift＋Command（WindowsはCtrl）＋ P」を押して検索バーを開く
2. 「au」で検索して「Autoprefixer: Run」を選択します