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
49
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
52
Pug.pdf
darrenyaoyaoyao
0
59
Sass.pdf
darrenyaoyaoyao
0
52
jquery.pdf
darrenyaoyaoyao
1
59
bootstrap.pdf
darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
darrenyaoyaoyao
0
120
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
51
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
31
Other Decks in Programming
See All in Programming
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
Pythonに漸進的に型をつける
nealle
1
130
三者三様 宣言的UI
kkagurazaka
0
280
CSC509 Lecture 08
javiergs
PRO
0
260
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
CSC305 Lecture 10
javiergs
PRO
0
290
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
180
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
CSC305 Lecture 08
javiergs
PRO
0
280
One Enishi After Another
snoozer05
PRO
0
170
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Building Adaptive Systems
keathley
44
2.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fireside Chat
paigeccino
41
3.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
The Cult of Friendly URLs
andyhume
79
6.6k
Speed Design
sergeychernyshev
32
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Invisible Side of Design
smashingmag
302
51k
Code Reviewing Like a Champion
maltzj
526
40k
It's Worth the Effort
3n
187
28k
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 旋轉的中⼼點