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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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, 1 month 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 side-by-side diff with in-line comments
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 »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: tools/perf/page_sets/tough_animation_cases/keyframed_animations.html
diff --git a/tools/perf/page_sets/tough_animation_cases/keyframed_animations.html b/tools/perf/page_sets/tough_animation_cases/keyframed_animations.html
index 114b4f4265038a9e581d693c5c08c469f6e8f5c6..538a601f43a858251889f7e27318bfcf9214801b 100644
--- a/tools/perf/page_sets/tough_animation_cases/keyframed_animations.html
+++ b/tools/perf/page_sets/tough_animation_cases/keyframed_animations.html
@@ -2,118 +2,112 @@
<html>
<head>
<style type="text/css">
- @-webkit-keyframes animation1 {
- 0% { -webkit-transform: translateX(0px); }
- 50% { -webkit-transform: translateX(100px); }
- 100% { -webkit-transform: translateX(0px); }
+ @keyframes animation1 {
+ 0% { transform: translateX(0px); }
+ 50% { transform: translateX(100px); }
+ 100% { transform: translateX(0px); }
}
- @-webkit-keyframes animation2 {
- 0% { -webkit-transform: rotate(0deg); }
- 50% { -webkit-transform: rotate(180deg); }
- 100% { -webkit-transform: rotate(0deg); }
+ @keyframes animation2 {
+ 0% { transform: rotate(0deg); }
+ 50% { transform: rotate(180deg); }
+ 100% { transform: rotate(0deg); }
}
- @-webkit-keyframes animation3 {
- 0% { -webkit-transform: scale(1); }
- 50% { -webkit-transform: scale(3); }
- 100% { -webkit-transform: scale(1); }
+ @keyframes animation3 {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(3); }
+ 100% { transform: scale(1); }
}
- @-webkit-keyframes animation4 {
- 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
- 50% { -webkit-transform: matrix(-1, 0, 0, -1, 0, 0); }
- 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
+ @keyframes animation4 {
+ 0% { transform: matrix(1, 0, 0, 1, 0, 0); }
+ 50% { transform: matrix(-1, 0, 0, -1, 0, 0); }
+ 100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
- @-webkit-keyframes animation5 {
- 0% { -webkit-transform: translateX(0px) scale(8); opacity(1); }
- 50% { -webkit-transform: translateX(100px) scale(0); opacity(0); }
- 100% { -webkit-transform: translateX(0px) scale(8); opacity(1); }
+ @keyframes animation5 {
+ 0% { transform: translateX(0px) scale(8); opacity(1); }
+ 50% { transform: translateX(100px) scale(0); opacity(0); }
+ 100% { transform: translateX(0px) scale(8); opacity(1); }
}
- @-webkit-keyframes animation6 {
- 0% { -webkit-transform: rotate(0deg); opacity(1); }
- 50% { -webkit-transform: rotate(180deg); opacity(0); }
- 100% { -webkit-transform: rotate(0deg); opacity(1); }
+ @keyframes animation6 {
+ 0% { transform: rotate(0deg); opacity(1); }
+ 50% { transform: rotate(180deg); opacity(0); }
+ 100% { transform: rotate(0deg); opacity(1); }
}
- @-webkit-keyframes animation7 {
- 0% { -webkit-transform: scale(1); opacity(1); }
- 50% { -webkit-transform: scale(13); opacity(0); }
- 100% { -webkit-transform: scale(1); opacity(1); }
+ @keyframes animation7 {
+ 0% { transform: scale(1); opacity(1); }
+ 50% { transform: scale(13); opacity(0); }
+ 100% { transform: scale(1); opacity(1); }
}
- @-webkit-keyframes animation8 {
- 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
- 50% { -webkit-transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0); }
- 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
+ @keyframes animation8 {
+ 0% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
+ 50% { transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0); }
+ 100% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
}
- @-webkit-keyframes animation9 {
- 0% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
- 50% { -webkit-transform: translateX(100px) rotate3d(0, 1, 0, 45deg); }
- 100% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
+ @keyframes animation9 {
+ 0% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
+ 50% { transform: translateX(100px) rotate3d(0, 1, 0, 45deg); }
+ 100% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
}
- @-webkit-keyframes animation10 {
- 0% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
- 50% { -webkit-transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); }
- 100% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
+ @keyframes animation10 {
+ 0% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
+ 50% { transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); }
+ 100% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
}
- @-webkit-keyframes animation11 {
- 0% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }
- 50% { -webkit-transform: scale(3) rotate3d(0, 1, 0, 45deg); }
- 100% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }
+ @keyframes animation11 {
+ 0% { transform: scale(1) rotate3d(0, 1, 0, 0deg); }
+ 50% { transform: scale(3) rotate3d(0, 1, 0, 45deg); }
+ 100% { transform: scale(1) rotate3d(0, 1, 0, 0deg); }
}
- @-webkit-keyframes animation12 {
- 0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
- 50% { -webkit-transform: matrix(-1, .5, .2, -1, 100, 100) rotate3d(0, 1, 0, 45deg); }
- 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
+ @keyframes animation12 {
+ 0% { transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
+ 50% { transform: matrix(-1, .5, .2, -1, 100, 100) rotate3d(0, 1, 0, 45deg); }
+ 100% { transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
}
- @-webkit-keyframes animation13 {
- 0% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
- 50% { -webkit-transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale(-10); opacity(0); }
- 100% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
+ @keyframes animation13 {
+ 0% { transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
+ 50% { transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale(-10); opacity(0); }
+ 100% { transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
}
- @-webkit-keyframes animation14 {
- 0% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
- 50% { -webkit-transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translateZ(500px); opacity(0); }
- 100% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
+ @keyframes animation14 {
+ 0% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
+ 50% { transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translateZ(500px); opacity(0); }
+ 100% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
}
-/* @-webkit-keyframes animation15 { */
-/* 0% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0deg); opacity(1); } */
-/* 50% { -webkit-transform: translateZ(500px) rotate3d(1, 1, 1, 45deg) rotate(180deg); opacity(0); }*/
-/* 100% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0deg); opacity(1); } */
-/* } */
-
- @-webkit-keyframes animation15 {
- 0% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
- 50% { -webkit-transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); }
- 100% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
+ @keyframes animation15 {
+ 0% { transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
+ 50% { transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); }
+ 100% { transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
}
- @-webkit-keyframes animation16 {
- 0% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
- 50% { -webkit-transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg); opacity(0); }
- 100% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
+ @keyframes animation16 {
+ 0% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
+ 50% { transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg); opacity(0); }
+ 100% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
}
div {
position: absolute;
- -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
}
.poster {
height: 50px;
width: 50px;
background-color: gray;
- -webkit-border-radius: 10px;
+ border-radius: 10px;
font-family: 'Georgia', serif;
border: 2px solid black;
font-size: 42px;
@@ -128,9 +122,9 @@
var elem = document.getElementById("elem" + i.toString());
elem.style.left = (i % 4 * 25 + 5).toString() + "%";
elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%";
- elem.style.webkitAnimationName = "animation" + (i + 1).toString();
- elem.style.webkitAnimationDuration = "2s";
- elem.style.webkitAnimationIterationCount = "infinite";
+ elem.style.animationName = "animation" + (i + 1).toString();
+ elem.style.animationDuration = "2s";
+ elem.style.animationIterationCount = "infinite";
}
}
« 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