Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(161)

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2530253002: CSS Animations: Reduce usage of webkit prefix in perf tests (Closed)
Patch Set: keyframes Created 4 years 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
« no previous file with comments | « tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_inserting_style_element.html ('k') | tools/perf/page_sets/tough_animation_cases/overlay_background_color_css_transitions.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style type="text/css"> 4 <style type="text/css">
5 @-webkit-keyframes animation1 { 5 @keyframes animation1 {
6 0% { -webkit-transform: translateX(0px); } 6 0% { transform: translateX(0px); }
7 50% { -webkit-transform: translateX(100px); } 7 50% { transform: translateX(100px); }
8 100% { -webkit-transform: translateX(0px); } 8 100% { transform: translateX(0px); }
9 } 9 }
10 10
11 @-webkit-keyframes animation2 { 11 @keyframes animation2 {
12 0% { -webkit-transform: rotate(0deg); } 12 0% { transform: rotate(0deg); }
13 50% { -webkit-transform: rotate(180deg); } 13 50% { transform: rotate(180deg); }
14 100% { -webkit-transform: rotate(0deg); } 14 100% { transform: rotate(0deg); }
15 } 15 }
16 16
17 @-webkit-keyframes animation3 { 17 @keyframes animation3 {
18 0% { -webkit-transform: scale(1); } 18 0% { transform: scale(1); }
19 50% { -webkit-transform: scale(3); } 19 50% { transform: scale(3); }
20 100% { -webkit-transform: scale(1); } 20 100% { transform: scale(1); }
21 } 21 }
22 22
23 @-webkit-keyframes animation4 { 23 @keyframes animation4 {
24 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); } 24 0% { transform: matrix(1, 0, 0, 1, 0, 0); }
25 50% { -webkit-transform: matrix(-1, 0, 0, -1, 0, 0); } 25 50% { transform: matrix(-1, 0, 0, -1, 0, 0); }
26 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); } 26 100% { transform: matrix(1, 0, 0, 1, 0, 0); }
27 } 27 }
28 28
29 @-webkit-keyframes animation5 { 29 @keyframes animation5 {
30 0% { -webkit-transform: translateX(0px) scale(8); opacity(1); } 30 0% { transform: translateX(0px) scale(8); opacity(1); }
31 50% { -webkit-transform: translateX(100px) scale(0); opacity(0); } 31 50% { transform: translateX(100px) scale(0); opacity(0); }
32 100% { -webkit-transform: translateX(0px) scale(8); opacity(1); } 32 100% { transform: translateX(0px) scale(8); opacity(1); }
33 } 33 }
34 34
35 @-webkit-keyframes animation6 { 35 @keyframes animation6 {
36 0% { -webkit-transform: rotate(0deg); opacity(1); } 36 0% { transform: rotate(0deg); opacity(1); }
37 50% { -webkit-transform: rotate(180deg); opacity(0); } 37 50% { transform: rotate(180deg); opacity(0); }
38 100% { -webkit-transform: rotate(0deg); opacity(1); } 38 100% { transform: rotate(0deg); opacity(1); }
39 } 39 }
40 40
41 @-webkit-keyframes animation7 { 41 @keyframes animation7 {
42 0% { -webkit-transform: scale(1); opacity(1); } 42 0% { transform: scale(1); opacity(1); }
43 50% { -webkit-transform: scale(13); opacity(0); } 43 50% { transform: scale(13); opacity(0); }
44 100% { -webkit-transform: scale(1); opacity(1); } 44 100% { transform: scale(1); opacity(1); }
45 } 45 }
46 46
47 @-webkit-keyframes animation8 { 47 @keyframes animation8 {
48 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); } 48 0% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
49 50% { -webkit-transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0) ; } 49 50% { transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0); }
50 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); } 50 100% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
51 } 51 }
52 52
53 @-webkit-keyframes animation9 { 53 @keyframes animation9 {
54 0% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); } 54 0% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
55 50% { -webkit-transform: translateX(100px) rotate3d(0, 1, 0, 45deg); } 55 50% { transform: translateX(100px) rotate3d(0, 1, 0, 45deg); }
56 100% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); } 56 100% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
57 } 57 }
58 58
59 @-webkit-keyframes animation10 { 59 @keyframes animation10 {
60 0% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); } 60 0% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
61 50% { -webkit-transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); } 61 50% { transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); }
62 100% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); } 62 100% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
63 } 63 }
64 64
65 @-webkit-keyframes animation11 { 65 @keyframes animation11 {
66 0% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); } 66 0% { transform: scale(1) rotate3d(0, 1, 0, 0deg); }
67 50% { -webkit-transform: scale(3) rotate3d(0, 1, 0, 45deg); } 67 50% { transform: scale(3) rotate3d(0, 1, 0, 45deg); }
68 100% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); } 68 100% { transform: scale(1) rotate3d(0, 1, 0, 0deg); }
69 } 69 }
70 70
71 @-webkit-keyframes animation12 { 71 @keyframes animation12 {
72 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); } 72 0% { 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); } 73 50% { 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) ; } 74 100% { transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
75 } 75 }
76 76
77 @-webkit-keyframes animation13 { 77 @keyframes animation13 {
78 0% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); } 78 0% { 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); } 79 50% { transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale(-10); op acity(0); }
80 100% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1) ; opacity(1); } 80 100% { transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacit y(1); }
81 } 81 }
82 82
83 @-webkit-keyframes animation14 { 83 @keyframes animation14 {
84 0% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0p x); opacity(1); } 84 0% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opac ity(1); }
85 50% { -webkit-transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translate Z(500px); opacity(0); } 85 50% { transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translateZ(500px) ; opacity(0); }
86 100% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ( 0px); opacity(1); } 86 100% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); op acity(1); }
87 } 87 }
88 88
89 /* @-webkit-keyframes animation15 { */ 89 @keyframes animation15 {
90 /* 0% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0de g); opacity(1); } */ 90 0% { transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
91 /* 50% { -webkit-transform: translateZ(500px) rotate3d(1, 1, 1, 45deg) rotate (180deg); opacity(0); }*/ 91 50% { transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); }
92 /* 100% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0 deg); opacity(1); } */ 92 100% { transform: scale(1) rotate3d(1, 1, 1, 0deg); 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 } 93 }
100 94
101 @-webkit-keyframes animation16 { 95 @keyframes animation16 {
102 0% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg) ; opacity(1); } 96 0% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacit y(1); }
103 50% { -webkit-transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg ); opacity(0); } 97 50% { transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg); opaci ty(0); }
104 100% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0de g); opacity(1); } 98 100% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opac ity(1); }
105 } 99 }
106 100
107 div { 101 div {
108 position: absolute; 102 position: absolute;
109 -webkit-transform-style: preserve-3d; 103 transform-style: preserve-3d;
110 } 104 }
111 105
112 .poster { 106 .poster {
113 height: 50px; 107 height: 50px;
114 width: 50px; 108 width: 50px;
115 background-color: gray; 109 background-color: gray;
116 -webkit-border-radius: 10px; 110 border-radius: 10px;
117 font-family: 'Georgia', serif; 111 font-family: 'Georgia', serif;
118 border: 2px solid black; 112 border: 2px solid black;
119 font-size: 42px; 113 font-size: 42px;
120 font-weight: bold; 114 font-weight: bold;
121 text-align: center; 115 text-align: center;
122 } 116 }
123 </style> 117 </style>
124 <script type="text/javascript"> 118 <script type="text/javascript">
125 function startExperiment() 119 function startExperiment()
126 { 120 {
127 for (var i = 0; i < 16; ++i) { 121 for (var i = 0; i < 16; ++i) {
128 var elem = document.getElementById("elem" + i.toString()); 122 var elem = document.getElementById("elem" + i.toString());
129 elem.style.left = (i % 4 * 25 + 5).toString() + "%"; 123 elem.style.left = (i % 4 * 25 + 5).toString() + "%";
130 elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%"; 124 elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%";
131 elem.style.webkitAnimationName = "animation" + (i + 1).toString(); 125 elem.style.animationName = "animation" + (i + 1).toString();
132 elem.style.webkitAnimationDuration = "2s"; 126 elem.style.animationDuration = "2s";
133 elem.style.webkitAnimationIterationCount = "infinite"; 127 elem.style.animationIterationCount = "infinite";
134 } 128 }
135 } 129 }
136 130
137 window.addEventListener('load', startExperiment, false); 131 window.addEventListener('load', startExperiment, false);
138 </script> 132 </script>
139 </head> 133 </head>
140 <body> 134 <body>
141 <div id="elem0"><p class="poster">?</p></div> 135 <div id="elem0"><p class="poster">?</p></div>
142 <div id="elem1"><p class="poster">?</p></div> 136 <div id="elem1"><p class="poster">?</p></div>
143 <div id="elem2"><p class="poster">?</p></div> 137 <div id="elem2"><p class="poster">?</p></div>
144 <div id="elem3"><p class="poster">?</p></div> 138 <div id="elem3"><p class="poster">?</p></div>
145 <div id="elem4"><p class="poster">?</p></div> 139 <div id="elem4"><p class="poster">?</p></div>
146 <div id="elem5"><p class="poster">?</p></div> 140 <div id="elem5"><p class="poster">?</p></div>
147 <div id="elem6"><p class="poster">?</p></div> 141 <div id="elem6"><p class="poster">?</p></div>
148 <div id="elem7"><p class="poster">?</p></div> 142 <div id="elem7"><p class="poster">?</p></div>
149 <div id="elem8"><p class="poster">?</p></div> 143 <div id="elem8"><p class="poster">?</p></div>
150 <div id="elem9"><p class="poster">?</p></div> 144 <div id="elem9"><p class="poster">?</p></div>
151 <div id="elem10"><p class="poster">?</p></div> 145 <div id="elem10"><p class="poster">?</p></div>
152 <div id="elem11"><p class="poster">?</p></div> 146 <div id="elem11"><p class="poster">?</p></div>
153 <div id="elem12"><p class="poster">?</p></div> 147 <div id="elem12"><p class="poster">?</p></div>
154 <div id="elem13"><p class="poster">?</p></div> 148 <div id="elem13"><p class="poster">?</p></div>
155 <div id="elem14"><p class="poster">?</p></div> 149 <div id="elem14"><p class="poster">?</p></div>
156 <div id="elem15"><p class="poster">?</p></div> 150 <div id="elem15"><p class="poster">?</p></div>
157 </body> 151 </body>
158 </html> 152 </html>
159 153
160 154
OLDNEW
« no previous file with comments | « tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_inserting_style_element.html ('k') | tools/perf/page_sets/tough_animation_cases/overlay_background_color_css_transitions.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698