2. CSS3

3. Animation

4. 소개

5.
GPU가

6. 어떻게

7. CSS3

8. Animation을

9. 가속하
나?

10.
CSS3

11. Animation의

12. 성능

13. 향상

14. 팁

15.
CSS3

17. 소개

18.
CSS3

20. 가

21. 개발된

22. 배경

23.
HTML5

24. Canvas

25. 소개

26.
GPU가

27. Canvas를

28. 그리는

29. 방법

32. http://trac.webkit.org/wiki/Applications%20using%20WebKit

33. http://www.satine.org/research/webkit/snowleopard/snowstack.html

35. http://www.webkit.org/blog/138/css-animation/
http://www.w3.org/TR/css3-transitions

37. http://www.dorothybrowser.com/test/webkitTest/css3/animation.html
h1 {
position: absolute;
color: red;
left: 10px;
top: 200px;
-webkit-animation: bounce 1s infinite ;
}
@-webkit-keyframes bounce {
0% { -webkit-transform: translate3d(0, 0px,0);
-webkit-animation-timing-function: ease-out; }
50% { -webkit-transform: translate3d(0,-150px,0);
-webkit-animation-timing-function: ease-in; }
100% { -webkit-transform: translate3d(0, 0px,0); }
}

38.
h1Bouncingdivh1Bouncing2divh1Bouncing3/h1/div/h1/div/h1
http://www.webkit.org/blog/324/css-animation-2/

39.
http://www.w3.org/TR/css3-animations/

41. x

42.
z

43.
y

44.
http://www.w3.org/TR/css3-3d-transforms/
http://desandro.github.com/3dtransforms/
http://www.webkit.org/blog/386/3d-transforms/

45. C

46.
A

47.
B

48.
http://gamedev.stackexchange.com/questions/19703/drawing-a-textured-
triangle-with-cpu-instead-of-gpu

50. http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp

52. http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp

54. http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-h
ardware-acceleration-of-all-web-page-content.aspx

56. http://ariya.ofilabs.com/2011/07/fluid-animation-with-accelerated-composition.html

57.
http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/

61. http://www.dorothybrowser.com/test/webkitTest/css3/animation-direction-normal.html
@-webkit-keyframes move1 {
from { -webkit-transform: translateX(0px); }
to { -webkit-transform: translateX(200px); }
}
http://www.dorothybrowser.com/test/webkitTest/css3/animation-direction-normal-nonaccelerated.html

62.
@-webkit-keyframes move1 {
from { left: 0px; }
to { left: 200px; }
}

63. transform,

64. color

65.
visibility:

66. hidden

67.
https://bugs.webkit.org/show_bug.cgi?id=92492
display:

68. none

69.
fade-out

70.
fade-in

74. http://www.valvesoftware.com/publications/2008/GDC2008_PostProcessingInTheOrangeBox.
pdf

75. img
{
-­‐webkit-­‐filter:
sepia(100%);
img
{
}

76.
-­‐webkit-­‐animation:
adjustHue
1s
alternate
infinite;
}
@-­‐webkit-­‐keyframes
adjustHue
{
0%
{
-­‐webkit-­‐filter:
hue-­‐rotate(30deg);
}
50%
{
-­‐webkit-­‐filter:
hue-­‐rotate(60deg);
}
100%
{
-­‐webkit-­‐filter:
hue-­‐rotate(90deg);
}
}

77.
1. blur(5,
5)
2. drop-­‐shadow(10,
5,
5)
3. hue-­‐rotate(328deg)
4. saturate(5)
5. invert(1)
6. grayscale(1)
7. opacity(0.5)
8. gamma(1.1,
3.6,
0)
9. sepia(0.5)

78.
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filt
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
ers/

79. http://www.adobe.com/devnet/html5/articles/css-shaders.html

80. http://xplsv.com/prods/demos/xplsv_orsotheysay/

82. http://www.hongkiat.com/blog/48-excellent-html5-demos/

84. //
Draw
black
rect
ctx.fillRect(50,
20,
145,
145);

86. //
Draw
blue
rect
ctx.fillStyle
=
rgb(0,
162,
232);
ctx.fillRect(135,
85,
125,
125);

88. //
Increase
line
width
ctx.lineWidth
=
5;

92. //
Draw
black
rect
outline
ctx.strokeStyle
=
rgb(0,
0,
0);
ctx.strokeRect(50,
335,
145,
145);

94. //
Draw
blue
rect
outline
ctx.strokeStyle
=
rgb(0,
162,
232);
ctx.strokeRect(135,
275,
125,
125);

96. //
Draw
transparent
yellow
rect
ctx.fillStyle
=
rgba(255,
255,
0,
0.75);
ctx.fillRect(210,
180,
125,
125);

97.
http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html

99. http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.ht
ml
http://blog.mecheye.net/2012/06/the-linux-graphics-stack
/