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
730
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
76
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
190
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
88
Live Your Life Like a Supervillain
bftrick
0
150
Ninja Gravity Form 7
bftrick
0
71
Are Robots Coming for Your Job?
bftrick
0
67
Scoping eCommerce Projects
bftrick
0
250
Accounting basics you need to get to a $1M+ seller
bftrick
0
120
Other Decks in Technology
See All in Technology
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.3k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.2k
手を動かしてレベルアップしよう!
maruto
0
230
Fraxinus00tw assembly manual
fukumay
0
130
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
100
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
230
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.4k
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
120
Охота на косуль у древних
ashapiro
0
110
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
180
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
850
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
KATA
mclloyd
29
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Practical Orchestrator
shlominoach
186
10k
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