Richard Imaoka

<p data-line="0" class="code-line">Webブラウザ内で動くアプリケーションで使えるアニメーション技法のおさらいです。こんな感じの分類になるかなあと思っています。</p>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line">CSSアニメーション
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">transition</li>
<li data-line="4" class="code-line">animation</li>
<li data-line="5" class="code-line">ライブラリ
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">Animate.css</li>
</ul>
</li>
</ul>
</li>
<li data-line="7" class="code-line">JavaScriptアニメーション
<ul data-line="8" class="code-line">
<li data-line="8" class="code-line">requestAnimationFrame</li>
<li data-line="9" class="code-line">Web Animation API</li>
<li data-line="10" class="code-line">Scroll Driven Animations</li>
<li data-line="11" class="code-line">Scroll State Animations</li>
<li data-line="12" class="code-line">View Transition API</li>
</ul>
</li>
<li data-line="13" class="code-line">ライブラリ &amp; tools
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">Popular
<ul data-line="15" class="code-line">
<li data-line="15" class="code-line">GSAP</li>
<li data-line="16" class="code-line">Motion</li>
</ul>
</li>
<li data-line="17" class="code-line">Advanced
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">Three.js</li>
<li data-line="19" class="code-line">Anime.js</li>
<li data-line="20" class="code-line">Rive</li>
</ul>
</li>
</ul>
</li>
</ul>
