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
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Search
darrenyaoyaoyao
November 06, 2020
Programming
0
42
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
November 06, 2020
Tweet
Share
More Decks by darrenyaoyaoyao
See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
42
Pug.pdf
darrenyaoyaoyao
0
50
Sass.pdf
darrenyaoyaoyao
0
47
jquery.pdf
darrenyaoyaoyao
1
51
bootstrap.pdf
darrenyaoyaoyao
1
63
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
26
Other Decks in Programming
See All in Programming
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
Server Driven Compose With Firebase
skydoves
0
400
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
4 Signs Your Business is Dying
shpigford
180
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
How GitHub (no longer) Works
holman
311
140k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Transcript
CSS Animation 基礎 讓網⾴動起來
keyframe 關鍵影格 @keyframe move { from { left:0; } to
{ left: 100px; } }
keyframe 的位置可以使⽤百分比 @keyframe move { 0% { background: #fff }
50% { background: #f00 } 100% { background: #000 } }
animation name 動畫名稱 @keyframe move { xxx } @keyframe fade
{ xxx }
animation duration 動畫持續的時間 animation-duration: 5s;
animation delay 動畫延遲的時間 animation-delay: 2s;
animation-timing-function 動畫加速度函式 animation-timing-function: linear; 有 linear, ease, ease-in, ease-out, ease-in-out
等設定
⾙茲曲線 cubic-bezier(n,n,n,n)
animation-direction 動畫播放⽅向 normal reverse alternate alternate-reverse
animation-fill-mode 動畫播放前後模式 none forwards backwards both
:after :before 偽元素
rotate 旋轉 transform-origin 旋轉的中⼼點