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_Animation_基礎.pdf
Search
darrenyaoyao
October 24, 2020
Programming
0
19
CSS_Animation_基礎.pdf
darrenyaoyao
October 24, 2020
Tweet
Share
More Decks by darrenyaoyao
See All by darrenyaoyao
HTML__CSS_基礎_.pdf
darrenyaoyao
0
21
HTML__CSS_基礎_.pdf
darrenyaoyao
0
24
HTML__CSS基礎二.pdf
darrenyaoyao
0
16
Javascript進階.pdf
darrenyaoyao
0
15
Javasrcipt_基礎一.pdf
darrenyaoyao
0
19
Bootstrap.pdf
darrenyaoyao
0
24
Sass_基礎篇.pdf
darrenyaoyao
0
25
Github_介紹.pdf
darrenyaoyao
0
110
Javascript_基礎二.pdf
darrenyaoyao
0
18
Other Decks in Programming
See All in Programming
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
Oxlint JS plugins
kazupon
1
1k
2026/02/04 AIキャラクター人格の実装論 口 調の模倣から、コンテキスト制御による 『思想』と『行動』の創発へ
sr2mg4
0
200
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
2.5k
Oxlintはいいぞ
yug1224
5
1.4k
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
280
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
100
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
390
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
520
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
CSC307 Lecture 05
javiergs
PRO
0
500
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
3k
Into the Great Unknown - MozCon
thekraken
40
2.3k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
950
30 Presentation Tips
portentint
PRO
1
230
How GitHub (no longer) Works
holman
316
140k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
760
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
130
AI: The stuff that nobody shows you
jnunemaker
PRO
2
280
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
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 旋轉的中⼼點