Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Animations vs WAAPI
Search
KeitaroOkamura
September 14, 2018
Programming
0
510
CSS Animations vs WAAPI
KeitaroOkamura
September 14, 2018
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
290
ヤギでもわかるソフトウェアテスト
keitarookamura
0
130
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
300
ヤギでもわかるGit入門
keitarookamura
1
250
ユースケースから考えるユーザビリティ
keitarookamura
1
210
サクッと簡単!お手軽 Scaffold
keitarookamura
1
290
自社サイトをPWA化した話
keitarookamura
0
120
マイクロインタラクションから考えるアニメーション
keitarookamura
1
270
Vue.js+AtomicDesign
keitarookamura
2
2.7k
Other Decks in Programming
See All in Programming
OSS開発者という働き方
andpad
5
1.7k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
アセットのコンパイルについて
ojun9
0
120
RDoc meets YARD
okuramasafumi
4
170
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
Improving my own Ruby thereafter
sisshiki1969
1
160
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building Applications with DynamoDB
mza
96
6.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
The Pragmatic Product Professional
lauravandoore
36
6.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Producing Creativity
orderedlist
PRO
347
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
CSS Animations vs WAAPI FukuokaJS #6 / 2018.09.13
PROFILE Keitaro Okamura karabiner.inc Frontend Engineer フロントエンドエンジニア0年生 @karaagekeitaroo
Web Animations API is 何? 新しい Web Animation Framework となる
JavaScriptのAPI 簡単に言うと、CSS Animation の keyframe 制御を JS から可能にしたようなもの ( W A A P I )
・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation
・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns
・ CSS animation、CSS transition ・ HTML5 Canvas ・ SVG animation
・ JS の DOM 操作で実装する animation … etc. Web Animation Patterns WAAPI
1. Let’s create Animation! element.animate(keyframes, options); WAAPI を使用してアニメーションを作成するには、keyframes と options
の 2 つの引数をとる Element.animate() 関数を使用します。
1. Let’s create Animation! element.animate(keyframes, options); WAAPI を使用してアニメーションを作成するには、keyframes と options
の 2 つの引数をとる Element.animate() 関数を使用します。 Sample
2. keyframes → CSS Animations の場合 @keyframes zoom { 0%
{transform: none;} 50% {transform: scale(1.5);} 100% {transform: none;} } 0%, 100% にtransform: none;、 50% にtransform: scale(1.5);を設定しており、 それを直線的に動かしています。
2. keyframes → WAAPI の場合 const zoom = { transform:
['none', 'scale(1.5)', 'none'] } 1. 単一の keyframes Object を渡す 各キーは、CSS プロパティを表し、配列内の各値は、アニメー ションタイムライン上のポイントを表します。
2. keyframes → WAAPI の場合 const zoom = [ {
transform: 'none' }, { transform: 'scale(1.5)', offset: 0.5 }, { transform: 'none' } ] 2. 配列として書き出す 配列内の各アイテムは、タイムライン上のポイントを表し、その ポイントに適用される各 CSS プロパティと値を指定します。
3. options → WAAPI の場合 const zoomOptions = { duration:
2000, easing: 'linear', delay: 150, iterations: Infinity } animate() 関数に渡す2番目の引数は、 いくつかのオプションを持つ Object です。
3. options → CSS Animations の場合 .selector { animation-name: zoom;
animation-duration: 2s; animation-timing-function: linear; animation-delay: 0.15s; animation-iteration-count: infinite; } 上記のように animation プロパティを指定します。 animation: zoom 2s linear 0.15s infinite; 一括で指定する場合
3. options → CSS Animations の場合 No property Description 1
animation-name アニメーション名 2 animation-duration 実行時間 3 animation-timing-function 進行の度合い 4 animation-delay 開始時間 5 animation-iteration-count 繰り返し回数 6 animation-direction 再生方向 7 animation-fill-mode 再生前後の状態 8 animation-play-state 再生・停止
3. options → WAAPI の場合 No property Description 1 id
ユニークID 2 duration 実行時間 3 easing 進行の度合い 4 delay 開始時間 5 iteration 繰り返し回数 6 direction 再生方向 7 fill 再生前後の状態 8 endDelay 終了後に遅延する時間 9 iterationStart 開始する繰り返しポイント
4. controll const animation = element.animate(keyframes, options); animation.play(); // 再生
animation.pause(); // 一時停止 animation.reverse(); // 逆再生 animation.cancel(); // キャンセル animation.finish(); // 終了時点まで進める Animation メソッドを使うことでアニメーションの実行を controll することができます。
Support Firefox と Chrome でサポート 実際に使う場合は pollyfill ( web-animations-js )
が必須 https://caniuse.com/#feat=web-animation
Performance
DEMO
・ JS でサポートされている関数と組み合わせれる ・ DOM 操作で直接 HTML 要素をアニメーションできる ・ 止まったり再開したり、アニメーションの制御ができる
CSS Animations との比較
・ アニメーションロジックを JS で一元管理 ・ アニメーションの詳細に大きく依存 ( case by case
) まとめ CSS Animations UI 関連の 小さなアニメーション WAAPI 細かな controll を必要とするより 高度なアニメーション& エフェクト
THANKS!