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
48
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
50
Pug.pdf
darrenyaoyaoyao
0
59
Sass.pdf
darrenyaoyaoyao
0
52
jquery.pdf
darrenyaoyaoyao
1
57
bootstrap.pdf
darrenyaoyaoyao
1
71
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
83
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
50
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
31
Other Decks in Programming
See All in Programming
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
500
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
500
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
570
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
460
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
5つのアンチパターンから学ぶLT設計
narihara
1
120
Deep Dive into ~/.claude/projects
hiragram
9
1.6k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
370
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
GitHub's CSS Performance
jonrohan
1031
460k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Thoughts on Productivity
jonyablonski
69
4.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Making Projects Easy
brettharned
116
6.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
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 旋轉的中⼼點