Movatterモバイル変換

[0]ホーム
URL:

Muyuu Fujita, profile picture
Uploaded byMuyuu Fujita
PDF, PPTX3,093 views

Cssアニメーションとその制御

Embed presentation

Download as PDF, PPTX
∼ ∼CSSアニメーションとその制御についてCreators MeetUp第3回
自己紹介名前所属職種twFBBlogMail藤田 無憂フリーランスディレクターフロントエンドエンジニアIT僧侶@anticyborgmuyuuhttp://stackstock.net/anticyborg@gmail.com
覚えたアビリティフロントエンド端末対応レスポンシブWebデザインサーバサイドスマートフォン用サイト・Webアプリ
今日のお話•Webとアニメーション•CSSアニメーションとは•CSSアニメーションの種類•制御する方法
Webとアニメーション
Webとアニメーション•今まではアニメーションと言えばFlash•Appleの「Flashいらね」宣言でみんな大変•「javascriptがあるじゃないか！」
JQueryで割と簡単にできる•記述が簡単•デザイナーフレンドリー
Javascriptのアニメーションは重い元々アニメーションの機能があるわけではないので、割と強引な手法で動かしてたりします。
Javascriptのアニメーションは重い元々アニメーションの機能があるわけではないので、割と強引な手法で動かしてたりします。そこでCSSですよ！
DEMOhttp://stackstock.net/demo/cmu0427/d06.html
CSSアニメーションとは
cssアニメーションとは•Level3(通称css3)で機能が追加された•ブラウザネイティブなので軽快な動作Javascriptはアニメーション機能を持っているわけではないので基本的には処理が重くなりがちIEは(いつものように)未対応•対応ブラウザは微妙
そんな感じでスマートフォンサイト、Webアプリのアニメーションにはcssが採用されるケースが多くなってきています。
cssアニメーションの種類
cssアニメーションの種類•transitionプロパティ:hover等の特定のアクションに対しての要素の変化をアニメーションさせるプロパティ。アクション終了時には逆のアニメーションで戻る要素の変化に対してアニメーションをつける
DEMOhttp://stackstock.net/demo/cmu0427/d01.html
transitionプロパティ•transition-property•transition-durationどの要素に対してアニメーションをさせるかアニメーションにかける時間•transition-delayアニメーションを開始するまでの遅延時間•transition-timing-functionどんなタイミングでどんな速度でアニメーションさせるか(イージング)
cssアニメーションの種類•animationプロパティキーフレームを使ってFlashのように柔軟に要素をアニメーションさせるプロパティ。タイムライン的なアニメーションができる
DEMOhttp://stackstock.net/demo/cmu0427/d02.html
animationプロパティ•animation-name•animation-duration実行するアニメーションの名前(@keyframes の名前)アニメーションにかける時間•animation-delayアニメーションを開始するまでの遅延時間•animation-iteration-count何回アニメーションを繰り返すか
animationプロパティ•animation-direction•animation-play-stateアニメーションの再生方向一時停止したり再開したり•animation-timing-functionどんなタイミングでどんな速度でアニメーションさせるか(イージング)•animation-fill-modeアニメーション実行後の振る舞いをどうするか
アニメーションの制御
クリックでアニメーションを開始http://stackstock.net/demo/cmu0427/d03.html
アニメーション終了後に次のアニメーションを開始http://stackstock.net/demo/cmu0427/d04.html
さっきのDEMOを修正して、何度でもクリックに反応する子に調教http://stackstock.net/demo/cmu0427/d03.5.html
最後にデモっぽいやつをhttp://stackstock.net/demo/cmu0427/d05.html
今のところ、cssアニメーションは全部手書きで動きも秒数も指定しないといけないめんどくさいっ！！
cssアニメーションの課題•端末、ブラウザの対応には延々悩まされる•オーサリングツールがない
時が解決してくれるよきっと例えばこの子とか…きっと…
今はきっと、基礎力を養う時期
がんばろうぜ！
ありがとうございました

Recommended

PDF
a-sap09「a-blog cmsとWordPress」
PPTX
Azure上でec cubeを運用するポイント
PDF
WooCommerce & AWS
PDF
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ！というお話。
PDF
WordPress ユーザーのための a-blog cms 入門
PDF
WordPressってこんなCMS
PDF
WordBench京都9月号
PDF
一歩踏み込むWordPress
PPTX
CSSから国民を守る党ver2
PPTX
Concurrent Programming in JavaScript
PDF
実践 大都会式 プロトタイピング＆フロントエンド 2014
PPTX
超初心者でもできた！AzureMobileService JSバージョン
PDF
Concurrent Programm in JavaScript
PDF
2014.07.09 WordBench Tokyo LT
PDF
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
PDF
a-sap08「a-blog cmsとMovable Type」
PDF
a-blogcsm な寺子屋 2 in Okazaki
PDF
ビジュアルエディタ用CSSで 快適なブログライフを!
PDF
メニューは管理画面で設定できるようにしよう
PDF
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
KEY
WordPressってブログじゃないの？
PDF
WordPress 初心者からの脱出 #tohokuitfes
PDF
DigitalCubeのリモートワーク
PDF
プロジェクトでRubocopを使って自動コードレビューしてみた話
PDF
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
PDF
MF GeeksNight pplogの話
PDF
20150121 jaws ug関西女子会
PDF
WP-APIを使ってみよう&No PHPテーマという考え方
PDF
分かりやすく、使いやすいデザインを生み出す工夫　先生：池田 拓司
PDF
見やすいプレゼン資料の作り方 - リニューアル増量版

More Related Content

PDF
a-sap09「a-blog cmsとWordPress」
PPTX
Azure上でec cubeを運用するポイント
PDF
WooCommerce & AWS
PDF
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ！というお話。
PDF
WordPress ユーザーのための a-blog cms 入門
PDF
WordPressってこんなCMS
PDF
WordBench京都9月号
PDF
一歩踏み込むWordPress
a-sap09「a-blog cmsとWordPress」
Azure上でec cubeを運用するポイント
WooCommerce & AWS
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ！というお話。
WordPress ユーザーのための a-blog cms 入門
WordPressってこんなCMS
WordBench京都9月号
一歩踏み込むWordPress

What's hot

PPTX
CSSから国民を守る党ver2
PPTX
Concurrent Programming in JavaScript
PDF
実践 大都会式 プロトタイピング＆フロントエンド 2014
PPTX
超初心者でもできた！AzureMobileService JSバージョン
PDF
Concurrent Programm in JavaScript
PDF
2014.07.09 WordBench Tokyo LT
PDF
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
PDF
a-sap08「a-blog cmsとMovable Type」
PDF
a-blogcsm な寺子屋 2 in Okazaki
PDF
ビジュアルエディタ用CSSで 快適なブログライフを!
PDF
メニューは管理画面で設定できるようにしよう
PDF
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
KEY
WordPressってブログじゃないの？
PDF
WordPress 初心者からの脱出 #tohokuitfes
PDF
DigitalCubeのリモートワーク
PDF
プロジェクトでRubocopを使って自動コードレビューしてみた話
PDF
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
PDF
MF GeeksNight pplogの話
PDF
20150121 jaws ug関西女子会
PDF
WP-APIを使ってみよう&No PHPテーマという考え方
CSSから国民を守る党ver2
Concurrent Programming in JavaScript
実践 大都会式 プロトタイピング＆フロントエンド 2014
超初心者でもできた！AzureMobileService JSバージョン
Concurrent Programm in JavaScript
2014.07.09 WordBench Tokyo LT
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
a-sap08「a-blog cmsとMovable Type」
a-blogcsm な寺子屋 2 in Okazaki
ビジュアルエディタ用CSSで 快適なブログライフを!
メニューは管理画面で設定できるようにしよう
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
WordPressってブログじゃないの？
WordPress 初心者からの脱出 #tohokuitfes
DigitalCubeのリモートワーク
プロジェクトでRubocopを使って自動コードレビューしてみた話
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
MF GeeksNight pplogの話
20150121 jaws ug関西女子会
WP-APIを使ってみよう&No PHPテーマという考え方

Viewers also liked

PDF
分かりやすく、使いやすいデザインを生み出す工夫　先生：池田 拓司
PDF
見やすいプレゼン資料の作り方 - リニューアル増量版
PDF
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
PDF
カヤックコピー部のコピー講座
PDF
アドテク勉強会
PDF
DMP勉強会
PDF
お金をかけないランディングページのつくりかた
PDF
コンテンツ作りの三原則
PDF
⑳CSSでアニメーション！その１
PDF
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
PPTX
CSSアニメーション はじめました。
PDF
【データアーティスト株式会社】5歳の娘でもわかるDMP
分かりやすく、使いやすいデザインを生み出す工夫　先生：池田 拓司
見やすいプレゼン資料の作り方 - リニューアル増量版
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
カヤックコピー部のコピー講座
アドテク勉強会
DMP勉強会
お金をかけないランディングページのつくりかた
コンテンツ作りの三原則
⑳CSSでアニメーション！その１
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
CSSアニメーション はじめました。
【データアーティスト株式会社】5歳の娘でもわかるDMP

Similar to Cssアニメーションとその制御

PDF
Css３でキャラクターアニメーションに挑戦してみた
PDF
Hello css animation_public
PDF
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
PPTX
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
PDF
CSS3 filterとtransformをtransition, animationでアニメーション
PDF
CSS3によるアニメーション表現
PDF
マークアップ講座 02 CSS
PDF
㉘HTML5+CSS3でアニメーション！
PDF
㉑CSSでアニメーション！その２
PDF
さらに一歩踏み込んだCSS3の使い方！コツとポイントを理解して 楽しくサイトを彩る方法
PDF
真面目なアニメーション (html5j 2013, Web Animations)
Css３でキャラクターアニメーションに挑戦してみた
Hello css animation_public
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
第3回 HTML5飯 少ない工数で豊かな表現！これが私のCSSアニメーション
CSS3 filterとtransformをtransition, animationでアニメーション
CSS3によるアニメーション表現
マークアップ講座 02 CSS
㉘HTML5+CSS3でアニメーション！
㉑CSSでアニメーション！その２
さらに一歩踏み込んだCSS3の使い方！コツとポイントを理解して 楽しくサイトを彩る方法
真面目なアニメーション (html5j 2013, Web Animations)

More from Muyuu Fujita

PDF
小規模案件で作られた秘伝のタレ
PDF
あの時AngularJSと出会った僕らは
PDF
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
PDF
JavaScriptと共に歩いて行く決意をした君へ
PDF
非ガチ勢「よし、Coffee script使おう！」
PDF
Learn ES2015
PDF
Start React with Browserify
PDF
閉じタグを超えた先に僕が見た景色とは
PDF
Html5でword pressテーマを作るよ！
PDF
Hello npm
PDF
ノンプログラマのGit入門
PDF
Objective Front-End JavaScript
PDF
WordPressで企業サイトのテーマを作る
KEY
WPerのWPerによるWPerのためのPHP入門
小規模案件で作られた秘伝のタレ
あの時AngularJSと出会った僕らは
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
JavaScriptと共に歩いて行く決意をした君へ
非ガチ勢「よし、Coffee script使おう！」
Learn ES2015
Start React with Browserify
閉じタグを超えた先に僕が見た景色とは
Html5でword pressテーマを作るよ！
Hello npm
ノンプログラマのGit入門
Objective Front-End JavaScript
WordPressで企業サイトのテーマを作る
WPerのWPerによるWPerのためのPHP入門

Cssアニメーションとその制御

[8]ページ先頭
©2009-2025 Movatter.jp