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
40
Pug.pdf
darrenyaoyaoyao
0
50
Sass.pdf
darrenyaoyaoyao
0
46
jquery.pdf
darrenyaoyaoyao
1
50
bootstrap.pdf
darrenyaoyaoyao
1
58
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
100
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
26
Other Decks in Programming
See All in Programming
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
270
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Ruby Parser progress report 2024
yui_knk
2
230
Prolog入門
qnighy
4
1k
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
410
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
Jakarta EE meets AI
ivargrimstad
1
520
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Featured
See All Featured
Designing for Performance
lara
604
68k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
It's Worth the Effort
3n
182
27k
How to Ace a Technical Interview
jacobian
274
23k
GraphQLとの向き合い方2022年版
quramy
43
13k
How STYLIGHT went responsive
nonsquared
93
5.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Code Reviewing Like a Champion
maltzj
517
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
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 旋轉的中⼼點