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
45
Pug.pdf
darrenyaoyaoyao
0
52
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
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
C++でシェーダを書く
fadis
6
4.1k
Macとオーディオ再生 2024/11/02
yusukeito
0
370
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
920
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
880
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
役立つログに取り組もう
irof
28
9.6k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Building Adaptive Systems
keathley
38
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Facilitating Awesome Meetings
lara
50
6.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Done Done
chrislema
181
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
890
Docker and Python
trallard
40
3.1k
Writing Fast Ruby
sferik
627
61k
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 旋轉的中⼼點