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
75
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
190
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
87
Live Your Life Like a Supervillain
bftrick
0
150
Ninja Gravity Form 7
bftrick
0
70
Are Robots Coming for Your Job?
bftrick
0
66
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
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
100
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
340
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
160
偏光画像処理ライブラリを作った話
elerac
1
170
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
430
php-conference-nagoya-2025
fuwasegu
0
150
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
130
クラウド食堂とは?
hiyanger
0
110
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
640
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How GitHub (no longer) Works
holman
314
140k
Being A Developer After 40
akosma
89
590k
Done Done
chrislema
182
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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