FrontinFortaleza 2015

Mauricio Maujor
Mauricio MaujorEstudante de tecnologias Web at Site do Maujor
Evolução das
animações na web
Maurício Samy Silva
Maujor
http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com
Animações na web
1993 – (HTML+)
Navegador Mosaic 1.0
implementa a tag <img>
GIF Animada
GIF Animada
GIF Animada
Animações na web
1995 – HTML 2
Navegador IE 2.0
implementa as tags
proprietárias
<marquee> e <embed>
Elemento <marquee>
Animações na web
1996 – Macromedia
Flash 1.0
FrontinFortaleza 2015
Animações na web
1996 - Navegador IE 3.0
implementa a linguagem
jscript
var el = document.getElementById('ele');
el.style.left = '0px';
el.style.top = '0px';
function animar() {
el.style.left = parseInt(el.style.left) + 2 + 'px';
el.style.top = parseInt(el.style.top) + 1 + 'px';
.
};
window.onload = animar();
<script></script>
setTimeout(animar, 50);
FrontinFortaleza 2015
DHTML
Exemplo 1
Exemplo 2
Exemplo 3
http://dynamicdrive.com
FrontinFortaleza 2015
FrontinFortaleza 2015
FrontinFortaleza 2015
Maujor
http://kwz.me/AX
<animate
attributeName="fill-opacity"
keyTimes="0; 0.47; 0.48;
0.55; 0.56; 1"
repeatCount="indefinite"
values="1; 1; 0; 0; 1; 1;"
dur="4s"
begin="2s"/>
SVG + SMIL
<style></style>
2009 – HTML4.01 e XHTML 1.0
Navegador Chrome 4.0
implementa animação CSS3
transition e animation
1996 2009 (13 anos)
HTML5
HTML5
<canvas> e <video>
2009
Especificações do W3C
Criadas em março 2009
transition:
http://www.w3.org/TR/css3-transitions/
animation:
http://www.w3.org/TR/css3-animations/
Transitions
button {
background: red;
...
}
button:hover {
background: green;
...
}
Transition
button {
background: red;
transition: background 2s ease-out;
}
button:hover {
background: green;
}
Transition
Transition
sem
transition
com
transition
:hover
button {
background: green;
font: 140px sans-serif;
border: 5px solid #fff;
color: red;
transition: all 2s ease-out;
}
Transition
button {
background: green;
font: 140px sans-serif;
border: 5px solid #fff;
color: red;
transition: 2s ease-out;
}
Transition
el {
transition-property: propriedade;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 500ms;
}
Transition
Sintaxe
el {
transition: propriedade 2s ease 1s;
}
Transition
Sintaxe
transition-property
transition-duration
transition-timing-function
transition-delay
transition
Transition
transition-timing-function
keyword
steps()
cubic-bezier()
Transition
keyword
linear ease
ease-in ease-out ease-in-out
steps()
steps(8, start) steps(8, end)
steps()
cubic-bezier(.6, .1, .15, .7)
cubic-bezier(.6, .1, .15, .7)
cubic-bezier(.6, .1, .15, .7)
cubic-bezier(.6, .1, .15, .7)
cubic-bezier(.6, .1, .15, .7)
cubic-bezier(.6, .1, .15, .7)
cubic-bezier(1, .3, .7, 0)
cubic-bezier(1, .3, .7, 0)
cubic-bezier
Traçado da curva de Bezier online
http://cubic-bezier.com
Animations
@keyframes animar {
from { left: 0; }
to { left: 90%;}
}
Animation
@keyframes animar {
0% { left: 0; }
100% { left: 90%;}
}
@keyframes animar {
to { left: 80em;}
}
Animation
@keyframes animar {
0% { left: 0; }
25% { left: 600px; }
75% { left: 950px; }
100% { left: 1200px;}
}
Animation
Animação com animation dispara em
dois momentos:
1. Carregamento da página (e estilos);
2. Aplicação de estilo por script.
div.ani { …
animation: animar 6s linear infinite alternate;
}
Animation
<script>
var el = document.getElementById(“a”);
el.onclick = function() {
this.className = “ani";
}
</script>
Animation
<div class=“ani”>...</div>
<div id=“a”>...</div>
animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
Animation
animation-direction
normal
alternate
reverse
alternate-reverse
Animation
Animation
Para as direções reverse e
alternate-reverse a função de
animação também reverte.
ease-in ease-out
animation-play-state
running
paused
Animation
transition x animation
animation
transition
http://kwz.me/Da
Em 2012 para comemorar 182 anos de
Eadweard J. Muybridge, fotógrafo
inglês, precursor da película de celulóide,
usada ainda hoje.
Google doodle
FrontinFortaleza 2015
API Motion Path
API Motion Path
API Timing Control
setTimeout()
setInterval()
requestAnimationFrame()
API Timing Control
API Web Animations
var animation = elem.animate([
{color:“#000",background:"#0cf",transform:rotate(0deg)"},
{color:"#f90",background:"#03c",transform:"rotate(120deg)"},
{color:"#f90",background:"#03c",transform:"rotate(240deg)"},
{color:"#000",background:"#0cf",transform:"rotate(360deg)"
], {
direction: 'linear',
duration: 10000,
iterations: Infinity
});
API Web Animations
API Web Animations
Obrigado
1 of 63

Recommended

JS.Chi CSS Animations by
JS.Chi CSS AnimationsJS.Chi CSS Animations
JS.Chi CSS AnimationsJustin Meyer
1.1K views15 slides
Slideshare for Journalists by @ross by
Slideshare for Journalists by @rossSlideshare for Journalists by @ross
Slideshare for Journalists by @rossRoss Mayfield
18.6K views19 slides
Infographic: Millennials vs Boomers at Work – Generational Showdown by
Infographic: Millennials vs Boomers at Work – Generational ShowdownInfographic: Millennials vs Boomers at Work – Generational Showdown
Infographic: Millennials vs Boomers at Work – Generational Showdowndomain .ME
4.9K views1 slide
New Norms @Work - Brasil by
New Norms @Work - BrasilNew Norms @Work - Brasil
New Norms @Work - BrasilLinkedIn
1.9K views1 slide
Influencer strategy by
Influencer strategyInfluencer strategy
Influencer strategyAndy Lammers
864 views40 slides
Olmeda origenes Catalogue 2015 by
Olmeda origenes Catalogue 2015Olmeda origenes Catalogue 2015
Olmeda origenes Catalogue 2015Olmeda Orígenes
1.3K views35 slides

More Related Content

Viewers also liked

00 introduccion by
00 introduccion00 introduccion
00 introduccionclasesteologia
344 views12 slides
Webinar employer brand_slideshare by
Webinar employer brand_slideshareWebinar employer brand_slideshare
Webinar employer brand_slideshareRebecca Feldman
1.1K views33 slides
Making Mobile the Default by
Making Mobile the DefaultMaking Mobile the Default
Making Mobile the Defaultgvwebteam
746 views24 slides
Erwin Vanderkoogh The science behind self-organisation by
Erwin Vanderkoogh  The science behind self-organisationErwin Vanderkoogh  The science behind self-organisation
Erwin Vanderkoogh The science behind self-organisationScrum Australia Pty Ltd
560 views45 slides
Data Mining - lecture 5 - 2014 by
Data Mining - lecture 5 - 2014Data Mining - lecture 5 - 2014
Data Mining - lecture 5 - 2014Andrii Gakhov
816 views24 slides
Pulse Terms of Service by
Pulse Terms of ServicePulse Terms of Service
Pulse Terms of Servicepulseweb
1.3K views3 slides

Viewers also liked(12)

Webinar employer brand_slideshare by Rebecca Feldman
Webinar employer brand_slideshareWebinar employer brand_slideshare
Webinar employer brand_slideshare
Rebecca Feldman1.1K views
Making Mobile the Default by gvwebteam
Making Mobile the DefaultMaking Mobile the Default
Making Mobile the Default
gvwebteam746 views
Data Mining - lecture 5 - 2014 by Andrii Gakhov
Data Mining - lecture 5 - 2014Data Mining - lecture 5 - 2014
Data Mining - lecture 5 - 2014
Andrii Gakhov816 views
Pulse Terms of Service by pulseweb
Pulse Terms of ServicePulse Terms of Service
Pulse Terms of Service
pulseweb1.3K views
Dj Growthtown Feb09 by David Jones
Dj Growthtown Feb09Dj Growthtown Feb09
Dj Growthtown Feb09
David Jones825 views
Renewable energy 3_of_3 by Laura Smith
Renewable energy 3_of_3Renewable energy 3_of_3
Renewable energy 3_of_3
Laura Smith1.5K views
Bacterias by UEA
BacteriasBacterias
Bacterias
UEA511 views
Introduction to Chemoinfornatics by SSA KPI
Introduction to ChemoinfornaticsIntroduction to Chemoinfornatics
Introduction to Chemoinfornatics
SSA KPI1.6K views
ADAARAN CLUB RANNALHI 5 DAYS & 4 NIGHTS FOR USD 806 PER PERSON by Shahrukh Hussain
ADAARAN CLUB RANNALHI 5 DAYS & 4 NIGHTS FOR USD 806 PER PERSONADAARAN CLUB RANNALHI 5 DAYS & 4 NIGHTS FOR USD 806 PER PERSON
ADAARAN CLUB RANNALHI 5 DAYS & 4 NIGHTS FOR USD 806 PER PERSON
Shahrukh Hussain589 views
ゼーガペイン ファン活動の記録 by Youichiro Miyake
ゼーガペイン ファン活動の記録ゼーガペイン ファン活動の記録
ゼーガペイン ファン活動の記録
Youichiro Miyake1.6K views

Similar to FrontinFortaleza 2015

Html5 by
Html5Html5
Html5Soliman ElSaber
717 views24 slides
Css3 by
Css3Css3
Css3Bronson Quick
2.6K views15 slides
Interface Styling & Scripting on WebKit Mobile by
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileDavid Aurelio
1.1K views33 slides
[A5]deview 2012 pt hds webkit_gpu by
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpuNAVER D2
4.1K views31 slides
How to build a html5 websites.v1 by
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
2.4K views84 slides
Interactive Vector-Graphics in the Browser by
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browsertec
1.6K views19 slides

Similar to FrontinFortaleza 2015(20)

Interface Styling & Scripting on WebKit Mobile by David Aurelio
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit Mobile
David Aurelio1.1K views
[A5]deview 2012 pt hds webkit_gpu by NAVER D2
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
NAVER D24.1K views
How to build a html5 websites.v1 by Bitla Software
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software2.4K views
Interactive Vector-Graphics in the Browser by tec
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browser
tec1.6K views
I Can't Believe It's Not Flash by Thomas Fuchs
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs25K views
Make your animations perform well by Anna Migas
Make your animations perform wellMake your animations perform well
Make your animations perform well
Anna Migas131 views
Make Your Animations Perform Well - JS Conf Budapest 2017 by Anna Migas
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017
Anna Migas736 views
UIWebViewでつくるUI by cocopon
UIWebViewでつくるUIUIWebViewでつくるUI
UIWebViewでつくるUI
cocopon 7.9K views
[wcatx] Adaptive Images in Responsive Web Design by Christopher Schmitt
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Christopher Schmitt1.9K views
Pure css-image-rollovers by Daniel Downs
Pure css-image-rolloversPure css-image-rollovers
Pure css-image-rollovers
Daniel Downs121 views
Илья Пухальский (EPAM Systems) by Ontico
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Ontico1.8K views
"Conditionally adaptive" Vadim Makeev by Fwdays
"Conditionally adaptive" Vadim Makeev"Conditionally adaptive" Vadim Makeev
"Conditionally adaptive" Vadim Makeev
Fwdays283 views
Design+Performance Velocity 2015 by Steve Souders
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
Steve Souders18.3K views
PreDevCampSF - CSS3 Tricks by incidentist
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
incidentist1.9K views
HalfStack London - Make Your Animations Perform Well by Anna Migas
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
Anna Migas356 views
Make your animations perform well - Anna Migas - Codemotion Rome 2017 by Codemotion
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Codemotion740 views

More from Mauricio Maujor

Quem se importa com acessibilidade na web? by
Quem se importa com acessibilidade na web?Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?Mauricio Maujor
270 views40 slides
O que o Maujor viu no Vue by
O que o Maujor viu no VueO que o Maujor viu no Vue
O que o Maujor viu no VueMauricio Maujor
269 views39 slides
CSS - Uma tecnologia em constante evolução by
CSS - Uma tecnologia em constante evoluçãoCSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evoluçãoMauricio Maujor
1.5K views25 slides
FlexBox - Uma visão geral by
FlexBox - Uma visão geralFlexBox - Uma visão geral
FlexBox - Uma visão geralMauricio Maujor
1.6K views17 slides
O elemento PICTURE para imagens responsivas by
O elemento PICTURE para imagens responsivasO elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivasMauricio Maujor
1.1K views18 slides
Web Design Responsivo by
Web Design ResponsivoWeb Design Responsivo
Web Design ResponsivoMauricio Maujor
1.6K views30 slides

More from Mauricio Maujor(11)

Recently uploaded

Business Analyst Series 2023 - Week 4 Session 7 by
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7DianaGray10
126 views31 slides
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...ShapeBlue
101 views17 slides
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueShapeBlue
222 views23 slides
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsShapeBlue
197 views13 slides
Microsoft Power Platform.pptx by
Microsoft Power Platform.pptxMicrosoft Power Platform.pptx
Microsoft Power Platform.pptxUni Systems S.M.S.A.
80 views38 slides
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueShapeBlue
163 views54 slides

Recently uploaded(20)

Business Analyst Series 2023 - Week 4 Session 7 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7
DianaGray10126 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue101 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue222 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue197 views
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
ShapeBlue163 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue140 views
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue144 views
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool by ShapeBlue
Extending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPoolExtending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPool
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool
ShapeBlue84 views
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P... by ShapeBlue
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
ShapeBlue154 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue158 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu365 views
State of the Union - Rohit Yadav - Apache CloudStack by ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue253 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue120 views
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ... by ShapeBlue
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
ShapeBlue85 views
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ... by ShapeBlue
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
ShapeBlue79 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue146 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely78 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue179 views

FrontinFortaleza 2015