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
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
プログラマのための作曲入門
cheebow
0
540
CSC509 Lecture 06
javiergs
PRO
0
240
CSC305 Lecture 02
javiergs
PRO
1
260
CSC509 Lecture 05
javiergs
PRO
0
290
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
610
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.1k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
Advance Your Career with Open Source
ivargrimstad
0
340
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
It's Worth the Effort
3n
187
28k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How to train your dragon (web standard)
notwaldorf
96
6.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Optimizing for Happiness
mojombo
379
70k
A Tale of Four Properties
chriscoyier
160
23k
For a Future-Friendly Web
brad_frost
180
9.9k
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 旋轉的中⼼點