tools/perf/page_sets/animations/keyframed_animations.html - Issue 11787013: Rename animations pageset to tough_animation_cases

Side by Side Diff: tools/perf/page_sets/animations/keyframed_animations.html

Issue 11787013: Rename animations pageset to tough_animation_cases (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src

Patch Set: Created 7 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2 <html>

3 <head>

4 <style type="text/css">

5 @-webkit-keyframes animation1 {

6 0% { -webkit-transform: translateX(0px); }

7 50% { -webkit-transform: translateX(100px); }

8 100% { -webkit-transform: translateX(0px); }

9 }

10

11 @-webkit-keyframes animation2 {

12 0% { -webkit-transform: rotate(0deg); }

13 50% { -webkit-transform: rotate(180deg); }

14 100% { -webkit-transform: rotate(0deg); }

15 }

16

17 @-webkit-keyframes animation3 {

18 0% { -webkit-transform: scale(1); }

19 50% { -webkit-transform: scale(3); }

20 100% { -webkit-transform: scale(1); }

21 }

22

23 @-webkit-keyframes animation4 {

24 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }

25 50% { -webkit-transform: matrix(-1, 0, 0, -1, 0, 0); }

26 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }

27 }

28

29 @-webkit-keyframes animation5 {

30 0% { -webkit-transform: translateX(0px) scale(8); opacity(1); }

31 50% { -webkit-transform: translateX(100px) scale(0); opacity(0); }

32 100% { -webkit-transform: translateX(0px) scale(8); opacity(1); }

33 }

34

35 @-webkit-keyframes animation6 {

36 0% { -webkit-transform: rotate(0deg); opacity(1); }

37 50% { -webkit-transform: rotate(180deg); opacity(0); }

38 100% { -webkit-transform: rotate(0deg); opacity(1); }

39 }

40

41 @-webkit-keyframes animation7 {

42 0% { -webkit-transform: scale(1); opacity(1); }

43 50% { -webkit-transform: scale(13); opacity(0); }

44 100% { -webkit-transform: scale(1); opacity(1); }

45 }

46

47 @-webkit-keyframes animation8 {

48 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }

49 50% { -webkit-transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0) ; }

50 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }

51 }

52

53 @-webkit-keyframes animation9 {

54 0% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }

55 50% { -webkit-transform: translateX(100px) rotate3d(0, 1, 0, 45deg); }

56 100% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }

57 }

58

59 @-webkit-keyframes animation10 {

60 0% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }

61 50% { -webkit-transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); }

62 100% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }

63 }

64

65 @-webkit-keyframes animation11 {

66 0% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }

67 50% { -webkit-transform: scale(3) rotate3d(0, 1, 0, 45deg); }

68 100% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }

69 }

70

71 @-webkit-keyframes animation12 {

72 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }

73 50% { -webkit-transform: matrix(-1, .5, .2, -1, 100, 100) rotate3d(0, 1, 0 , 45deg); }

74 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg) ; }

75 }

76

77 @-webkit-keyframes animation13 {

78 0% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }

79 50% { -webkit-transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale( -10); opacity(0); }

80 100% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1) ; opacity(1); }

81 }

82

83 @-webkit-keyframes animation14 {

84 0% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0p x); opacity(1); }

85 50% { -webkit-transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translate Z(500px); opacity(0); }

86 100% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ( 0px); opacity(1); }

87 }

88

89 /* @-webkit-keyframes animation15 { */

90 /* 0% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0de g); opacity(1); } */

91 /* 50% { -webkit-transform: translateZ(500px) rotate3d(1, 1, 1, 45deg) rotate (180deg); opacity(0); }*/

92 /* 100% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0 deg); opacity(1); } */

93 /* } */

94

95 @-webkit-keyframes animation15 {

96 0% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }

97 50% { -webkit-transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); }

98 100% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }

99 }

100

101 @-webkit-keyframes animation16 {

102 0% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg) ; opacity(1); }

103 50% { -webkit-transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg ); opacity(0); }

104 100% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0de g); opacity(1); }

105 }

106

107 div {

108 position: absolute;

109 -webkit-transform-style: preserve-3d;

110 }

111

112 .poster {

113 height: 50px;

114 width: 50px;

115 background-color: gray;

116 -webkit-border-radius: 10px;

117 font-family: 'Georgia', serif;

118 border: 2px solid black;

119 font-size: 42px;

120 font-weight: bold;

121 text-align: center;

122 }

123 </style>

124 <script type="text/javascript">

125 function startExperiment()

126 {

127 for (var i = 0; i < 16; ++i) {

128 var elem = document.getElementById("elem" + i.toString());

129 elem.style.left = (i % 4 * 25 + 5).toString() + "%";

130 elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%";

131 elem.style.webkitAnimationName = "animation" + (i + 1).toString();

132 elem.style.webkitAnimationDuration = "2s";

133 elem.style.webkitAnimationIterationCount = "infinite";

134 }

135 }

136

137 window.addEventListener('load', startExperiment, false);

138 </script>

139 </head>

140 <body>

141 <div id="elem0"><p class="poster">?</p></div>

142 <div id="elem1"><p class="poster">?</p></div>

143 <div id="elem2"><p class="poster">?</p></div>

144 <div id="elem3"><p class="poster">?</p></div>

145 <div id="elem4"><p class="poster">?</p></div>

146 <div id="elem5"><p class="poster">?</p></div>

147 <div id="elem6"><p class="poster">?</p></div>

148 <div id="elem7"><p class="poster">?</p></div>

149 <div id="elem8"><p class="poster">?</p></div>

150 <div id="elem9"><p class="poster">?</p></div>

151 <div id="elem10"><p class="poster">?</p></div>

152 <div id="elem11"><p class="poster">?</p></div>

153 <div id="elem12"><p class="poster">?</p></div>

154 <div id="elem13"><p class="poster">?</p></div>

155 <div id="elem14"><p class="poster">?</p></div>

156 <div id="elem15"><p class="poster">?</p></div>

157 </body>

158 </html>

159

160

OLD	NEW

« no previous file with comments | « tools/perf/page_sets/animations.json ('k') | tools/perf/page_sets/animations/transform_transitions.html » ('j') | no next file with comments »