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
JavaScriptでKeyframeAnimationを作ってみた
Search
cancer
April 19, 2014
Technology
1
77
JavaScriptでKeyframeAnimationを作ってみた
帰ってきたYokohama.js(#yjs20140419)でLTしたスライドです
cancer
April 19, 2014
Tweet
Share
More Decks by cancer
See All by cancer
JSXをモダンな感じで開発してみた
cancer
0
470
AngularJSで作ったアプリをReactで置き換えてみた
cancer
0
230
CSSスプライトを動的生成して快適ソシャゲ開発
cancer
1
260
第2回 Sass勉強会 in 社内
cancer
1
70
Other Decks in Technology
See All in Technology
AWS認定を取る中で感じたこと
siromi
1
190
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
19k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
350
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
Claude Code に プロジェクト管理やらせたみた
unson
6
4k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
ゼロからはじめる採用広報
yutadayo
3
930
Featured
See All Featured
Side Projects
sachag
455
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
BBQ
matthewcrist
89
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
What's in a price? How to price your products and services
michaelherold
246
12k
The Language of Interfaces
destraynor
158
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
帰ってきたYokohama.js (#yjs20140419) JavaScript で KeyframeAnimation を 作ってみた
自己紹介 宇野 陽太( ) @cancer6 株式会社モバイルファクトリー というところで フロントエンドエンジニアやってます 最近はBackbone /
Marionette / AngularJS あたりを触ったり CSS 書いたりなど
CSS Animation
CSS Animation CSS にkeyframe 書いて... アニメー ション用のclass を作ってプロパティ書いて... JS からclass
の操作して... ...
めんどくさい
どうせJS 使うなら全部JS で やってしまおう
css-animations.js https://github.com/jlongster/css-animations.js DOM からCSS にアクセスして色々 やってくれる CSS ファイルで定義したkeyframe を取ってきたり JavaScript
から動的にkeyframe を生成したり オブジェクトでkeyframe のプロパティを渡してあげる var anim1 = CSSAnimations.get("anim1"); var anim2 = CSSAnimations.create("anim2", { "0%": { "background-color": "red" }, "100%": { "background-color": "blue" }
css-animations.js ベンダー プレフィックスが必要なプロパティの記述が冗長 transform 系のプロパティも冗長になりがち アニメー ションのプロパティ(animation-name/animation- duration など) は別途DOM
の操作が必要 var anim = CSSAnimations.create("anim", { "0%": { opacity: "0.5", border-radius: "0" "-webkit-border-radius": "0" transform: "translate(0, 0) rotate(90deg) scale(1)" "-webkit-transform": "translate(0, 0) rotate(90deg) scale(1)" }, "100%": { opacity: "1", border-radius: "5px" "-webkit-border-radius": "5px" transform: "translate(100px, 50px) rotate(180deg) scale(2)" "-webkit-transform": "translate(100px, 50px) rotate(180deg) scale(2)" } $("#animation").css({ "animation-name": "anim", "animation-duration": "5s" "animation-timing-function": "linear" "animation-delay": "1s" "animation-fill-mode": "both"
まだめんどくさい
keyframe-animations.js カッコカリ https://github.com/cancer/keyframe-animations.js ( さっき) つくりました No more ベンダー プレフィックス
transform 系も見やすく アニメー ションのプロパティも一緒に設定できます var animation = keyframeAnimation.setup({ name: "anim", keyframe: { "0%": { opacity: "0.5", borderRadius: "0", translate: "0 0", rotate: "90deg", scale: "1" }, "100%": { opacity: "1", borderRadius: "5px", translate: "100px 50px", rotate: "180deg", scale: "2" } }, animation: { duration: "5s",
keyframe-animations.js カッコカリ アニメー ションの実行/ 停止もかんたん animationEnd で何かしたいとかもできます // アニメーション実行 animation.animate($("#animation"));
// アニメーション停止 animation.freeze(); // animationEndで何か実行したい animation.animate($("#animation"), function($element){ // アニメーションが終わったら要素を非表示にする $element.hide() });
keyframe-animations.js カッコカリ アニメー ションのライブラリを作ったりすると捗るはず var animationLibrary = new AnimationLibrary(); animationLibrary.setupModalAnimation();
こんな感じで
ご清聴ありがとうございました