This document discusses the evolution of animations on the web from 1993 to present. It covers early implementations of GIF animations and proprietary tags in 1995. Flash was introduced in 1996, and JavaScript animations emerged in 1996. CSS transitions and animations were introduced between 2009-2013, allowing animations without Flash. Modern web animation capabilities continue to be enhanced with APIs for timing control, motion paths, and the Web Animations API.

1. Evolução das
animações na web

2. Maurício Samy Silva
Maujor
http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com

3. Animações na web
1993 – (HTML+)
Navegador Mosaic 1.0
implementa a tag <img>
GIF Animada

4. GIF Animada

5. GIF Animada

6. Animações na web
1995 – HTML 2
Navegador IE 2.0
implementa as tags
proprietárias
<marquee> e <embed>

7. Elemento <marquee>

8. Animações na web
1996 – Macromedia
Flash 1.0

10. Animações na web
1996 - Navegador IE 3.0
implementa a linguagem
jscript

11. 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);

13. DHTML
Exemplo 1
Exemplo 2
Exemplo 3
http://dynamicdrive.com

17. 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

18. <style></style>
2009 – HTML4.01 e XHTML 1.0
Navegador Chrome 4.0
implementa animação CSS3
transition e animation
1996 2009 (13 anos)

19. HTML5
HTML5
<canvas> e <video>
2009

20. 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/

21. Transitions

22. button {
background: red;
...
}
button:hover {
background: green;
...
}
Transition

23. button {
background: red;
transition: background 2s ease-out;
}
button:hover {
background: green;
}
Transition

24. Transition
sem
transition
com
transition
:hover

25. button {
background: green;
font: 140px sans-serif;
border: 5px solid #fff;
color: red;
transition: all 2s ease-out;
}
Transition

26. button {
background: green;
font: 140px sans-serif;
border: 5px solid #fff;
color: red;
transition: 2s ease-out;
}
Transition

27. el {
transition-property: propriedade;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 500ms;
}
Transition
Sintaxe

28. el {
transition: propriedade 2s ease 1s;
}
Transition
Sintaxe

29. transition-property
transition-duration
transition-timing-function
transition-delay
transition
Transition

30. transition-timing-function
keyword
steps()
cubic-bezier()
Transition

31. keyword
linear ease
ease-in ease-out ease-in-out

32. steps()
steps(8, start) steps(8, end)

33. steps()

34. cubic-bezier(.6, .1, .15, .7)

35. cubic-bezier(.6, .1, .15, .7)

36. cubic-bezier(.6, .1, .15, .7)

37. cubic-bezier(.6, .1, .15, .7)

38. cubic-bezier(.6, .1, .15, .7)

39. cubic-bezier(.6, .1, .15, .7)

40. cubic-bezier(1, .3, .7, 0)

41. cubic-bezier(1, .3, .7, 0)

42. cubic-bezier
Traçado da curva de Bezier online
http://cubic-bezier.com

43. Animations

44. @keyframes animar {
from { left: 0; }
to { left: 90%;}
}
Animation
@keyframes animar {
0% { left: 0; }
100% { left: 90%;}
}

45. @keyframes animar {
to { left: 80em;}
}
Animation
@keyframes animar {
0% { left: 0; }
25% { left: 600px; }
75% { left: 950px; }
100% { left: 1200px;}
}

46. Animation
Animação com animation dispara em
dois momentos:
1. Carregamento da página (e estilos);
2. Aplicação de estilo por script.

47. div.ani { …
animation: animar 6s linear infinite alternate;
}
Animation

48. <script>
var el = document.getElementById(“a”);
el.onclick = function() {
this.className = “ani";
}
</script>
Animation
<div class=“ani”>...</div>
<div id=“a”>...</div>

49. animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
Animation

50. animation-direction
normal
alternate
reverse
alternate-reverse
Animation

51. Animation
Para as direções reverse e
alternate-reverse a função de
animação também reverte.
ease-in ease-out

52. animation-play-state
running
paused
Animation

53. transition x animation
animation
transition

54. 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

56. API Motion Path

57. API Motion Path

58. API Timing Control

59. setTimeout()
setInterval()
requestAnimationFrame()
API Timing Control

60. API Web Animations

61. 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

62. API Web Animations

63. Obrigado