The document discusses how GPUs can accelerate CSS3 animations. It introduces CSS3 animations and transitions, and explains how GPUs help render animations through hardware acceleration. It provides tips for improving animation performance, such as using transforms instead of left/top properties, and links to additional resources on animation, 3D transforms, filters and other GPU-accelerated effects in CSS.

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
/