CSS Animation の資料を追加 #24

takerucam · 2026-01-19T06:30:57Z

html, css, js のファイルを追加しました。

README を見ながら進めてもらい不備がないかのチェックをしていただきたいです。

Shion-Serizawa · 2026-01-20T06:20:34Z

2025/css-animation/README.md

+
+```css
+.nav {
+  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);


~~cubic-bezierが初見なので、解説を追加すると良さそう。~~

~~FYI~~
~~https://cubic-bezier.com/#.4,0,.2,1 でベジェ曲線の可視化をしてくれるらしいです。（claude code先輩が伝えてきた）~~

資料下部に書いてありましたね 🙇
アラート記法とかで案内しても良いかもです。

https://qiita.com/Yarakashi_Kikohshi/items/e6802e08921388d8c6e9

Shion-Serizawa · 2026-01-20T06:32:12Z

2025/css-animation/README.md

+## 🎨 cubic-bezier() について
+
+`cubic-bezier()` はアニメーションのイージング（加速・減速）を制御する関数です。
+


3 次ベジェ曲線を使用してスムーズな遷移を作成します。
MDNより、↑の説明を追加してもよいかも？ベジエ曲線というワードを入れたほうが「イメージしやすいかも？」と思いました。

https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/easing-function/cubic-bezier

Shion-Serizawa · 2026-01-20T06:34:41Z

2025/css-animation/README.md

+
+## 📚 学習ステップ
+
+### Step 1: 基本的な @keyframes アニメーション


📝
Step1では、動きを定義するだけ実際には動かない。

ここの授業するときの、説明の仕方は考えておくと良さそう。（というより、シミュレーションみたいなイメージ）

Shion-Serizawa · 2026-01-20T06:39:53Z

2025/css-animation/README.md

+.nav-menu a::after {
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}


📝
ホーバー時に下線を表示するCSSがstyle.cssにある。

ここでは、それを制御した形。

Shion-Serizawa · 2026-01-20T06:48:07Z

2025/css-animation/README.md

+#### 2-4. テーマ切替ボタンのホバー
+
+```css
+.theme-toggle {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle:hover {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  transform: rotate(180deg);
+}
+
+.theme-toggle:hover svg {
+  stroke: white;
+}
+
+.theme-toggle svg {
+  transition: stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+```


📝

冒頭でallを指定→全部の要素にtransitonがつくはず。

svg側はtransitonを上書きしているけど。

strokeは svgの線の色の指定をするときに使うらしい。

※時間があったら、ここでsvg側の秒数を変える遊びをしてもいいかも？（この要素にこだわっているわけではないけど）

Shion-Serizawa · 2026-01-20T06:51:03Z

2025/css-animation/README.md

+.theme-toggle:hover {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  transform: rotate(180deg);


📝
rotateはここが初登場

Shion-Serizawa · 2026-01-20T06:59:02Z

2025/css-animation/README.md

+**確認方法:** 右上のテーマ切替ボタンにマウスをホバーすると回転します。
+
+### Step 3: ヒーローセクションのアニメーション


ここにStep2-5の話が無さそう。

@media とかで詰まるかも？

📝 active が押したときに動作するやつ

スマホ用に「開発者ツール」で縮める説明が必要なので、スキップでも良さそう。

Shion-Serizawa · 2026-01-20T07:00:17Z

※ 📝 には、自分が瞬間的には理解できなかったものを書き綴っています🙏

Shion-Serizawa · 2026-01-20T08:05:35Z

2025/css-animation/README.md

+```css
+.typing-text {
+  overflow: hidden;
+}
+
+.typing-text .title-line {
+  display: block;
+  opacity: 0;
+  animation: typing-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}


📝

詰まった所

overflow:hidden はアニメーションとは関係なさそう

forwardsが初見

nth-child は番号がついているので、なんとなく察した。

→みたいな予想を毎回してもらうと良いかも？（時間があれば）

claude解説

1. 親要素（.typing-text） .typing-text { overflow: hidden; /* はみ出た部分を隠す */ } 2. 各行の基本設定（.title-line） .typing-text .title-line { display: block; /* ブロック要素として表示 */ opacity: 0; /* 初期状態は透明（見えない） */ animation: typing-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } animation の構成: typing-reveal: アニメーション名（[animations.css:46-56](vscode-webview://0hav65pjflksd562ul60i5bn3odr6l8ekfn180ircqimktc0f2tj/2025/css-animation/animations.css#L46-L56)で定義） 0.8s: 0.8秒かけて実行 cubic-bezier(0.4, 0, 0.2, 1): イージング関数 forwards: アニメーション終了後、最終状態を維持

Shion-Serizawa · 2026-01-20T08:06:14Z

2025/css-animation/README.md

+}
+
+.typing-text .title-line {
+  display: block;


display: block;がstyle.cssと重複していそうです🙏

Shion-Serizawa · 2026-01-20T08:10:27Z

2025/css-animation/README.md

+}
+
+.scroll-arrow {
+  animation: bounce 2s ease-in-out infinite;


📝
ease-in-out infiniteが初見

Shion-Serizawa · 2026-01-20T08:35:35Z

2025/css-animation/README.md

+.btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}


📝

（親起点で）absolute

そのうえで位置指定（中心に配置）

border-radius: 50%で丸なのはわかってた。

transform: translate(-50%, -50%);で要素自体を真ん中に持ってくる（なるほど）

active::beforeと比較すると前段階の::beforeに設置する。（よく考えたら他と一緒だけど、疑似要素がついているから一瞬混乱した）

Shion-Serizawa · 2026-01-21T02:47:03Z

2025/css-animation/complete/styles.css

+  --color-accent: #3b82f6;
+  --color-accent-hover: #2563eb;


6-2. フッターリンクのホバー で a:hover→.footer-links a:hover に上書きするわけですが、色が近くて違いがわかりにくいので、（デザイン性は失われるかもですが🙈）違う色をチョイスしても良さそうです🙏

Shion-Serizawa · 2026-01-21T02:50:09Z

2025/css-animation/README.md

+#### 6-3. リンクのアンダーラインアニメーション
+
+```css
+a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo) {


📝

長いCSS👀

aタグにこの5つのクラスがある場合は無視するってやつ。

まぁ、質問来たらでいいかな。。。

Shion-Serizawa · 2026-01-21T02:54:16Z

2025/css-animation/animations.css

+a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo) {
+  /* position: relative; */
+}
+
+a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo)::after {
+  /* content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: currentColor;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
+}
+
+a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo):hover::after {
+  /* width: 100%; */
+}


Suggested change

a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo) {

/* position: relative; */

}

a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo)::after {

/* content: '';

position: absolute;

bottom: -2px;

left: 0;

width: 0;

height: 1px;

background: currentColor;

transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); */

}

a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo):hover::after {

/* width: 100%; */

}

a:not(.btn, .card-link-wrapper, .social-link, .social-link-large, .nav-logo) {

position: relative;

}

a:not(.btn, .card-link-wrapper, .social-link, .social-link-large, .nav-logo)::after {

content: '';

position: absolute;

bottom: -2px;

left: 0;

width: 0;

height: 1px;

background: currentColor;

transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

a:not(.btn, .card-link-wrapper, .social-link, .social-link-large, .nav-logo):hover::after {

width: 100%;

}

短縮記法も使えそう
※safari君も動くのかは未確認

Shion-Serizawa · 2026-01-21T02:59:02Z

2025/css-animation/animations.css

+  /* position: relative; */
+}
+
+a:not(.btn):not(.card-link-wrapper):not(.social-link):not(.social-link-large):not(.nav-logo)::after {


📝

このタイミングで「aタグ」と「a:after」が別要素なので、positonがそれぞれ違くても良いということを理解した。

Shion-Serizawa · 2026-01-21T04:31:49Z

2025/css-animation/README.md

+
+### Step 7: スクロールアニメーション
+
+`.fade-in-on-scroll`、`.slide-in-left-on-scroll`、`.slide-in-right-on-scroll`、`.scale-in-on-scroll` クラスは、


.fade-in-on-scroll以外は、現状のHTMLで不使用な予感。

README.md上で案内しても良さそう。

もしくは、「他のアニメーションを適用してみよう！」の時間？

Shion-Serizawa · 2026-01-21T04:43:34Z

2025/css-animation/animations.css

+/* コメントを外すと、アバター画像にマウスホバーしたときに拡大・回転します */
+.avatar-large,
+.author-avatar {
+  /* transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
+}
+
+.avatar-large:hover {
+  /* transform: scale(1.05) rotate(5deg); */
+}


現状だと.author-avatar側にはアニメーションがつかなそう

アバター画像が、グラデーションがかかった◯なので、5degだと何もわからなそう。

思い切って、180degとか？

※変更時はドキュメント側に「確認方法: about.html のプロフィール画像にマウスをホバーすると、拡大して少し回転します。」という表記があることに注意。

Shion-Serizawa · 2026-01-21T04:47:19Z

2025/css-animation/animations.css

+
+.skill-item:nth-child(1) .skill-progress {
+  --progress: 95%;
+  /* animation-delay: 0.1s; */


草

animation-delayで0.1sずつずらす、というパワープレイ　😂

Shion-Serizawa · 2026-01-21T05:13:46Z

2025/css-animation/animations.css

+.timeline-marker {
+  /* animation: scale-pulse 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
+}
+
+.timeline-article-marker {
+  /* animation: scale-pulse 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
+}
+
+@keyframes scale-pulse {
+  /* 0% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  } */
+}


0.6sだと、10-1とドンピシャで被っているので効果が見れなそう。

↓あらかじめ、この位置にしておいて、リロードすると見れる。

Shion-Serizawa · 2026-01-21T05:16:06Z

2025/css-animation/animations.css

+
+/* 11-1. スクロールプログレスバー */
+/* コメントを外すと、ページをスクロールしたときに進捗バーが伸びます */
+@supports (animation-timeline: scroll()) {


📝

@supports (animation-timeline: scroll()) はブラウザが引数のやつを使用可能なときだけ、適応するというやつらしい。

Shion-Serizawa · 2026-01-21T05:22:47Z

2025/css-animation/script.js

+  window.categoryFilter = new CategoryFilter();
+
+  new ScrollAnimationObserver();
+  new ScrollProgress();


11-1. スクロールプログレスバーに関して、JS側でも実装されているため、CSSアニメーションがあるか否かに関わらず、動作していそうです。

Shion-Serizawa · 2026-01-21T05:39:42Z

2025/css-animation/README.md

+
+```css
+@supports (animation-timeline: scroll()) {
+  /* 背景画像：ゆっくり動く（遠くにあるように見える） */


（もとがグラデーションだからか、）背景画像に対する効果はよくわからず。。。

「そこも使えるよ！」という意図にはなるので、消すほどでもなさそう。

Shion-Serizawa · 2026-01-21T05:41:07Z

2025/css-animation/README.md

+@supports (animation-timeline: scroll()) {
+  /* 背景画像：ゆっくり動く（遠くにあるように見える） */
+  .parallax-image {
+    animation: parallax-bg linear;
+    animation-timeline: scroll(root);
+    animation-range: 0 600px;
+  }
+
+  @keyframes parallax-bg {
+    to {
+      transform: translateY(100px);
+    }
+  }
+
+  /* 装飾円1：速く動く（手前にあるように見える） */
+  .parallax-circle-1 {
+    animation: parallax-fast linear;
+    animation-timeline: scroll(root);
+    animation-range: 0 600px;
+  }
+
+  @keyframes parallax-fast {
+    to {
+      transform: translateY(300px);
+    }
+  }
+
+  /* 装飾円2：中くらいの速度で動く */
+  .parallax-circle-2 {
+    animation: parallax-medium linear;
+    animation-timeline: scroll(root);
+    animation-range: 0 600px;
+  }
+
+  @keyframes parallax-medium {
+    to {
+      transform: translateY(200px);
+    }
+  }
+
+  /* 装飾円3：とても速く動く（最も手前にあるように見える） */
+  .parallax-circle-3 {
+    animation: parallax-very-fast linear;
+    animation-timeline: scroll(root);
+    animation-range: 0 600px;
+  }
+
+  @keyframes parallax-very-fast {
+    to {
+      transform: translateY(400px);
+    }
+  }
+
+  /* 四角形：回転しながら動く */
+  .parallax-square {
+    animation: parallax-rotate linear;
+    animation-timeline: scroll(root);
+    animation-range: 0 600px;
+  }
+
+  @keyframes parallax-rotate {
+    to {
+      transform: translateY(250px) rotate(225deg);
+    }
+  }
+}


📝
個人的には、この部分が視覚効果として感動しました！

seri-jig · 2026-01-22T01:24:05Z

@takerucam
リポジトリ本体のREADMEの更新をお願いします。

takerucam added 4 commits January 19, 2026 15:28

add: CSS Animationハンズオンの基本構造（HTML、CSS、JavaScript、データファイル）

17bd460

add: CSS Animationハンズオンのドキュメント（学習ガイド、ステップ解説、参考リンク）

4708fee

add: CSS Animationハンズオンの学習用アニメーションファイル（コメントアウト済み）

808fc0e

add: CSS Animationハンズオンの完成版ファイル（参考用）

bc67ec3

takerucam assigned Shion-Serizawa Jan 19, 2026

Shion-Serizawa reviewed Jan 20, 2026

View reviewed changes

Shion-Serizawa reviewed Jan 21, 2026

View reviewed changes

		## 🎨 cubic-bezier() について

		`cubic-bezier()` はアニメーションのイージング（加速・減速）を制御する関数です。


		## 📚 学習ステップ

		### Step 1: 基本的な @keyframes アニメーション

		確認方法: 右上のテーマ切替ボタンにマウスをホバーすると回転します。

		### Step 3: ヒーローセクションのアニメーション


		### Step 7: スクロールアニメーション

		`.fade-in-on-scroll`、`.slide-in-left-on-scroll`、`.slide-in-right-on-scroll`、`.scale-in-on-scroll` クラスは、

CSS Animation の資料を追加 #24

Are you sure you want to change the base?

CSS Animation の資料を追加 #24

Uh oh!

Conversation

takerucam commented Jan 19, 2026

Uh oh!

Shion-Serizawa Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shion-Serizawa commented Jan 20, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

seri-jig commented Jan 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Shion-Serizawa Jan 20, 2026 •

edited

Loading