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
42
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
42
Pug.pdf
darrenyaoyaoyao
0
50
Sass.pdf
darrenyaoyaoyao
0
47
jquery.pdf
darrenyaoyaoyao
1
51
bootstrap.pdf
darrenyaoyaoyao
1
63
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
26
Other Decks in Programming
See All in Programming
CSC305 Lecture 13
javiergs
PRO
0
130
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
Identifying User Idenity
moro
6
7.9k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
A Philosophy of Restraint
colly
203
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
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 旋轉的中⼼點