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
51
Pug.pdf
darrenyaoyaoyao
0
59
Sass.pdf
darrenyaoyaoyao
0
52
jquery.pdf
darrenyaoyaoyao
1
57
bootstrap.pdf
darrenyaoyaoyao
1
72
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
83
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
51
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
31
Other Decks in Programming
See All in Programming
効率的な開発手段として VRTを活用する
ishkawa
1
180
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
530
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
130
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
180
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
300
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
CDK引数設計道場100本ノック
badmintoncryer
2
520
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
350
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
980
KATA
mclloyd
30
14k
Optimizing for Happiness
mojombo
379
70k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Statistics for Hackers
jakevdp
799
220k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Scaling GitHub
holman
460
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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 旋轉的中⼼點