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
39
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
40
Pug.pdf
darrenyaoyaoyao
0
46
Sass.pdf
darrenyaoyaoyao
0
41
jquery.pdf
darrenyaoyaoyao
1
50
bootstrap.pdf
darrenyaoyaoyao
1
44
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
94
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
26
Other Decks in Programming
See All in Programming
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
580
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.7k
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
Try creating your own orderedmap
kazamori
1
280
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
290
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
230
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
430
RaaP
ksss
0
150
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
620
株式会社ゼネテック
genetec
0
120
AmperとFleetを使ったAndroidアプリ
yoppie
0
300
The grand strategy of Ruby Parser
yui_knk
4
260
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
The Invisible Side of Design
smashingmag
294
49k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Infographics Made Easy
chrislema
238
18k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Building Adaptive Systems
keathley
32
1.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
120
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.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 旋轉的中⼼點