Soumettre la recherche
Mettre en ligne
Cssアニメーションとその制御
•
2 j'aime
•
3,082 vues
Muyuu Fujita
Suivre
Signaler
Partager
Signaler
Partager
1 sur 32
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
Mariko Imamura
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
Azure上でec cubeを運用するポイント
Azure上でec cubeを運用するポイント
Makoto Nishimura
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
WordBench京都9月号
WordBench京都9月号
Koji Asaga
WordPress ユーザーのための a-blog cms 入門
WordPress ユーザーのための a-blog cms 入門
Akiko Kasaya
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
Recommandé
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
Mariko Imamura
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
Azure上でec cubeを運用するポイント
Azure上でec cubeを運用するポイント
Makoto Nishimura
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
WordBench京都9月号
WordBench京都9月号
Koji Asaga
WordPress ユーザーのための a-blog cms 入門
WordPress ユーザーのための a-blog cms 入門
Akiko Kasaya
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
Concurrent Programm in JavaScript
Concurrent Programm in JavaScript
yjono Seino
Concurrent Programming in JavaScript
Concurrent Programming in JavaScript
yjono Seino
実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014
Masayuki Maekawa
20150121 jaws ug関西女子会
20150121 jaws ug関西女子会
Shinya Yamada
CSSから国民を守る党ver2
CSSから国民を守る党ver2
akatsuki 1910
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
Etsushi Ishii
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Seiko Kuchida
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Seiko Kuchida
プロジェクトでRubocopを使って自動コードレビューしてみた話
プロジェクトでRubocopを使って自動コードレビューしてみた話
Cake YOSHIDA
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
Cake YOSHIDA
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
Yuma Tahara
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
Yuriko Kamimori
WordPress 初心者からの脱出 #tohokuitfes
WordPress 初心者からの脱出 #tohokuitfes
Kazue Igarashi
2014.07.09 WordBench Tokyo LT
2014.07.09 WordBench Tokyo LT
Yutaro Miyazaki
DigitalCubeのリモートワーク
DigitalCubeのリモートワーク
Kazue Igarashi
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
CSSアニメーション はじめました。
CSSアニメーション はじめました。
Teppei Morinaga
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Contenu connexe
Tendances
Concurrent Programm in JavaScript
Concurrent Programm in JavaScript
yjono Seino
Concurrent Programming in JavaScript
Concurrent Programming in JavaScript
yjono Seino
実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014
Masayuki Maekawa
20150121 jaws ug関西女子会
20150121 jaws ug関西女子会
Shinya Yamada
CSSから国民を守る党ver2
CSSから国民を守る党ver2
akatsuki 1910
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
Etsushi Ishii
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Seiko Kuchida
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Seiko Kuchida
プロジェクトでRubocopを使って自動コードレビューしてみた話
プロジェクトでRubocopを使って自動コードレビューしてみた話
Cake YOSHIDA
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
Cake YOSHIDA
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
Yuma Tahara
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
Yuriko Kamimori
WordPress 初心者からの脱出 #tohokuitfes
WordPress 初心者からの脱出 #tohokuitfes
Kazue Igarashi
2014.07.09 WordBench Tokyo LT
2014.07.09 WordBench Tokyo LT
Yutaro Miyazaki
DigitalCubeのリモートワーク
DigitalCubeのリモートワーク
Kazue Igarashi
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
Tendances
(20)
Concurrent Programm in JavaScript
Concurrent Programm in JavaScript
Concurrent Programming in JavaScript
Concurrent Programming in JavaScript
実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014
20150121 jaws ug関西女子会
20150121 jaws ug関西女子会
CSSから国民を守る党ver2
CSSから国民を守る党ver2
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
MF GeeksNight pplogの話
MF GeeksNight pplogの話
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
プロジェクトでRubocopを使って自動コードレビューしてみた話
プロジェクトでRubocopを使って自動コードレビューしてみた話
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
WordPressってブログじゃないの?
WordPressってブログじゃないの?
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
超初心者でもできた!AzureMobileService JSバージョン
超初心者でもできた!AzureMobileService JSバージョン
WordPress 初心者からの脱出 #tohokuitfes
WordPress 初心者からの脱出 #tohokuitfes
2014.07.09 WordBench Tokyo LT
2014.07.09 WordBench Tokyo LT
DigitalCubeのリモートワーク
DigitalCubeのリモートワーク
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
En vedette
CSSアニメーション はじめました。
CSSアニメーション はじめました。
Teppei Morinaga
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
takuo yamada
DMP勉強会
DMP勉強会
Shoho Kozawa
【データアーティスト株式会社】5歳の娘でもわかるDMP
【データアーティスト株式会社】5歳の娘でもわかるDMP
Satoru Yamamoto
アドテク勉強会
アドテク勉強会
Shoho Kozawa
お金をかけないランディングページのつくりかた
お金をかけないランディングページのつくりかた
Satoru Yamamoto
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コピーライターはせがわ てつじ
コンテンツ作りの三原則
コンテンツ作りの三原則
INFOBAHN.inc(株式会社インフォバーン)
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
En vedette
(12)
CSSアニメーション はじめました。
CSSアニメーション はじめました。
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
DMP勉強会
DMP勉強会
【データアーティスト株式会社】5歳の娘でもわかるDMP
【データアーティスト株式会社】5歳の娘でもわかるDMP
アドテク勉強会
アドテク勉強会
お金をかけないランディングページのつくりかた
お金をかけないランディングページのつくりかた
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コンテンツ作りの三原則
コンテンツ作りの三原則
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
Similaire à Cssアニメーションとその制御
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
CSSから国民を守る党
CSSから国民を守る党
akatsuki 1910
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
ジーノ先生の文系的オブジェクト指向(2) - コンストラクタの引数
ジーノ先生の文系的オブジェクト指向(2) - コンストラクタの引数
Satoru Kodaira
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
Keisuke Nishitani
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
Takeharu Igari
データビジュアライゼーション Dc.jsで遊ぼう - 清水
データビジュアライゼーション Dc.jsで遊ぼう - 清水
chome03
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
Yu Tanaka
SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!
Atsushi Handa
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
irof N
詳解!自動結合テスト #jasst
詳解!自動結合テスト #jasst
kyon mm
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
Kyo Kaji
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
swwwitch inc.
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明
schoowebcampus
Similaire à Cssアニメーションとその制御
(20)
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
CSSから国民を守る党
CSSから国民を守る党
Web制作勉強会 #2
Web制作勉強会 #2
ジーノ先生の文系的オブジェクト指向(2) - コンストラクタの引数
ジーノ先生の文系的オブジェクト指向(2) - コンストラクタの引数
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
データビジュアライゼーション Dc.jsで遊ぼう - 清水
データビジュアライゼーション Dc.jsで遊ぼう - 清水
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
詳解!自動結合テスト #jasst
詳解!自動結合テスト #jasst
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明
Plus de Muyuu Fujita
Hello npm
Hello npm
Muyuu Fujita
Learn ES2015
Learn ES2015
Muyuu Fujita
Start React with Browserify
Start React with Browserify
Muyuu Fujita
Objective Front-End JavaScript
Objective Front-End JavaScript
Muyuu Fujita
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
Muyuu Fujita
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
Muyuu Fujita
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
Muyuu Fujita
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
Muyuu Fujita
WPerのWPerによるWPerのためのPHP入門
WPerのWPerによるWPerのためのPHP入門
Muyuu Fujita
ノンプログラマのGit入門
ノンプログラマのGit入門
Muyuu Fujita
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
Plus de Muyuu Fujita
(14)
Hello npm
Hello npm
Learn ES2015
Learn ES2015
Start React with Browserify
Start React with Browserify
Objective Front-End JavaScript
Objective Front-End JavaScript
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
WPerのWPerによるWPerのためのPHP入門
WPerのWPerによるWPerのためのPHP入門
ノンプログラマのGit入門
ノンプログラマのGit入門
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Cssアニメーションとその制御
1.
∼ ∼ CSSアニメーションと その制御について Creators MeetUp 第3回
2.
自己紹介 名前 所属 職種 tw FB Blog Mail 藤田 無憂 フリーランス ディレクター フロントエンドエンジニア IT僧侶 @anticyborg muyuu http://stackstock.net/ anticyborg@gmail.com
3.
覚えたアビリティ フロントエンド 端末対応 レスポンシブWebデザイン サーバサイド スマートフォン用サイト・Webアプリ
4.
今日のお話 •Webとアニメーション •CSSアニメーションとは •CSSアニメーションの種類 •制御する方法
5.
Webとアニメーション
6.
Webとアニメーション •今まではアニメーションと言えばFlash •Appleの「Flashいらね」宣言でみんな大変 •「javascriptがあるじゃないか!」
7.
JQueryで割と簡単にできる •記述が簡単 •デザイナーフレンドリー
8.
Javascriptのアニメーションは重い 元々アニメーションの機能があるわけではない ので、割と強引な手法で動かしてたりします。
9.
Javascriptのアニメーションは重い 元々アニメーションの機能があるわけではない ので、割と強引な手法で動かしてたりします。 そこでCSSですよ!
10.
DEMO http://stackstock.net/demo/cmu0427/d06.html
11.
CSSアニメーションとは
12.
cssアニメーションとは •Level3(通称css3)で機能が追加された •ブラウザネイティブなので軽快な動作 Javascriptはアニメーション機能を持っているわけではないので 基本的には処理が重くなりがち IEは(いつものように)未対応 •対応ブラウザは微妙
13.
そんな感じでスマートフォンサイト、 Webアプリのアニメーションにはcss が採用されるケースが多くなってきて います。
14.
cssアニメーションの種類
15.
cssアニメーションの種類 •transitionプロパティ :hover等の特定のアクションに対しての要素の変化をアニメーション させるプロパティ。アクション終了時には逆のアニメーションで戻る 要素の変化に対して アニメーションをつける
16.
DEMO http://stackstock.net/demo/cmu0427/d01.html
17.
transitionプロパティ •transition-property •transition-duration どの要素に対してアニメーションをさせるか アニメーションにかける時間 •transition-delay アニメーションを開始するまでの遅延時間 •transition-timing-function どんなタイミングでどんな速度でアニメーションさせるか(イージング)
18.
cssアニメーションの種類 •animationプロパティ キーフレームを使ってFlashのように柔軟に要素をアニメーションさ せるプロパティ。 タイムライン的な アニメーションができる
19.
DEMO http://stackstock.net/demo/cmu0427/d02.html
20.
animationプロパティ •animation-name •animation-duration 実行するアニメーションの名前(@keyframes の名前) アニメーションにかける時間 •animation-delay アニメーションを開始するまでの遅延時間 •animation-iteration-count 何回アニメーションを繰り返すか
21.
animationプロパティ •animation-direction •animation-play-state アニメーションの再生方向 一時停止したり再開したり •animation-timing-function どんなタイミングでどんな速度でアニメーションさせるか(イージング) •animation-fill-mode アニメーション実行後の振る舞いをどうするか
22.
アニメーションの制御
23.
クリックでアニメーションを開始 http://stackstock.net/demo/cmu0427/d03.html
24.
アニメーション終了後に次の アニメーションを開始 http://stackstock.net/demo/cmu0427/d04.html
25.
さっきのDEMOを修正して、何度で もクリックに反応する子に調教 http://stackstock.net/demo/cmu0427/d03.5.html
26.
最後にデモっぽいやつを http://stackstock.net/demo/cmu0427/d05.html
27.
今のところ、cssアニメーション は全部手書きで動きも秒数も指定 しないといけない めんどくさいっ!!
28.
cssアニメーションの課題 •端末、ブラウザの対応には延々悩まされる •オーサリングツールがない
29.
時が解決して くれるよきっと 例えばこの子とか…きっと…
30.
今はきっと、 基礎力を養う時期
31.
がんばろうぜ!
32.
ありがとうございました
Télécharger maintenant