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
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
120
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
130
Pwned Labsのすゝめ
ken5scal
2
570
事業を差別化する技術を生み出す技術
pyama86
2
500
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
200
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
420
Охота на косуль у древних
ashapiro
0
120
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
310
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
360
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
770
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Site-Speed That Sticks
csswizardry
4
410
Into the Great Unknown - MozCon
thekraken
35
1.6k
BBQ
matthewcrist
87
9.5k
Docker and Python
trallard
44
3.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Visualization
eitanlees
146
15k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Facilitating Awesome Meetings
lara
53
6.3k
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