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
720
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
120
Black Friday 2020: Your Biggest Sales Day Yet
bftrick
1
74
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
190
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
84
Live Your Life Like a Supervillain
bftrick
0
150
Ninja Gravity Form 7
bftrick
0
67
Are Robots Coming for Your Job?
bftrick
0
64
Scoping eCommerce Projects
bftrick
0
230
Accounting basics you need to get to a $1M+ seller
bftrick
0
120
Other Decks in Technology
See All in Technology
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
120
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
210
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
990
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.6k
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
590
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Platform Engineering for Software Developers and Architects
syntasso
1
520
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
204
24k
For a Future-Friendly Web
brad_frost
175
9.4k
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