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
CSS3 Animations & Transitions
Search
Patrick Rauland
April 15, 2013
Technology
0
750
CSS3 Animations & Transitions
A deck about CSS Animations and Transitions for the Web920 Meetup group.
Patrick Rauland
April 15, 2013
Tweet
Share
More Decks by Patrick Rauland
See All by Patrick Rauland
Google Analytics for Clients
bftrick
0
130
Black Friday 2020: Your Biggest Sales Day Yet
bftrick
1
84
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
220
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
94
Live Your Life Like a Supervillain
bftrick
0
160
Ninja Gravity Form 7
bftrick
0
84
Are Robots Coming for Your Job?
bftrick
0
74
Scoping eCommerce Projects
bftrick
0
270
Accounting basics you need to get to a $1M+ seller
bftrick
0
140
Other Decks in Technology
See All in Technology
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
290
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
430
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
120
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
How Community Opened Global Doors
hiroramos4
PRO
1
120
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
270
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
540
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
Github Copilot エージェントモードで試してみた
ochtum
0
100
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fireside Chat
paigeccino
37
3.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Optimizing for Happiness
mojombo
379
70k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
How to Ace a Technical Interview
jacobian
277
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
How STYLIGHT went responsive
nonsquared
100
5.6k
GitHub's CSS Performance
jonrohan
1031
460k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
GraphQLとの向き合い方2022年版
quramy
48
14k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
Web 920 CSS3 Animations & Transitions Patrick Rauland @bftrick
About Me
Transitions • Any CSS change based on an element's state
◦ hover states ◦ adding a class via js • All CSS, no JS or Flash
Transitions #my-element { transition: all 2s linear; }
Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:
500ms; }
Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:
500ms; } • The list of properties to transition • ex. ◦ height ◦ opacity ◦ font-size ◦ all ◦ etc
Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:
500ms; } • Duration • Ex. ◦ 2s ◦ 2000 ms
Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:
500ms; } • Easing • Ex. ◦ linear ◦ ease-in ◦ ease-out ◦ ease-in-out
Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:
500ms; } • Delay • Ex. ◦ 2s ◦ 2000ms
Transitions - Browser Support • Firefox • Webkit ◦ Safari
◦ Chrome • Opera • IE 10+ • Webkit requires a prefix: ◦ -webkit-transition
Transitions - Examples • http://burnhamrichards.com/ • http://optimalweb.biz/
Animations • A set of CSS states (keyframes)
Madmanimation http://stuffandnonsense.co. uk/content/demo/madmanimation/
Animations #my-element { animation: my-animation 5s; } @keyframes my-animation {
0% {background: red;} 50% {background: blue;} 100% {background: green;} }
Animations • Let's see that code in action! • http://jsfiddle.
net/BFTrick/dJ44G/embedded/result/
Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:
2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Name of animation
Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:
2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Duration • Ex. ◦ 5s ◦ 5000ms
Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:
2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Easing • Ex. ◦ linear ◦ ease-in ◦ ease-out ◦ ease-in-out
Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:
2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Delay
Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:
2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Count • Ex. ◦ 1 ◦ 2 ◦ 3 ◦ infinite
Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:
2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Direction of keyframes • Ex. ◦ normal ◦ alternate ◦ reverse
Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:
2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • On/off switch
Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;
} 100% { background: blue; left:200px; top:200px; } } • Name of animation
Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;
} 100% { background: blue; left:200px; top:200px; } } • Keyframe position • Unlimited keyframes • Alternate notation: ◦ to ◦ from
Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;
} 100% { background: blue; left:200px; top:200px; } } • CSS styles • Can be just about anything
Animations - Browser Support • Firefox • Webkit ◦ Safari
◦ Chrome • Opera • IE 10+ • Webkit requires a prefix: ◦ -webkit-transition
Animations - Examples • http://cleangrooves.net/ • http://production.mcl.bz/ • http://www.enstromhelicopter.com/
Animations - Code Samples • http://daneden.me/animate/ • http://www.spritely.net/
Animations - Inspiration • http://codepen.io/ • http://codepen.io/soulwire/pen/EKmwC • http://codepen.io/SaraSoueidan/pen/sBELl