Skip to content

Commit 04ab41d

Browse files
Kevin Ellischromium-wpt-export-bot
Kevin Ellis
authored and
chromium-wpt-export-bot
committed
Composite multiple independent transform property animations
Previously, individual transform properties were lumped together with transform lists, and only a single transform could be composited. With this patch, we support multiple transforms as long as each affects a different property (transform, translate, rotate, or scale). Bug: 696374 Change-Id: Id4da5da2fceb929bd5ddbffc04f9d63f9b85497a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3016295 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/master@{#901495}
1 parent f6d3768 commit 04ab41d

2 files changed

Lines changed: 159 additions & 0 deletions

File tree

‎css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Individual transform: combine individual transform properties</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
7+
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
8+
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
9+
<style>
10+
@keyframes anim {
11+
to {
12+
transform: translate(50px, 50px) rotate(45deg) scale(2, 1);
13+
}
14+
}
15+
.block {
16+
display: inline-block;
17+
width: 50px;
18+
height: 50px;
19+
margin: 50px;
20+
padding: 0;
21+
transform-origin: 0 0;
22+
background: lime;
23+
/* Freeze the animation at the midpoint. */
24+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
25+
animation-duration: 1000000s;
26+
animation-delay: -500000s;
27+
animation-name: anim;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div>
33+
<div class="block"></div>
34+
<div class="block"></div>
35+
</div>
36+
<div>
37+
<div class="block"></div>
38+
<div class="block"></div>
39+
</div>
40+
<div>
41+
<div class="block"></div>
42+
<div class="block"></div>
43+
</div>
44+
</body>
45+
</html>

‎css/css-transforms/individual-transform/animation/individual-transform-ordering.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Individual transform: combine individual transform properties</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
7+
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
8+
<meta name="assert" content="Tests that we combine transforms in the correct order when animating."/>
9+
<link rel="match" href="individual-transform-ordering-ref.html">
10+
<style>
11+
.block {
12+
display: inline-block;
13+
width: 50px;
14+
height: 50px;
15+
margin: 50px;
16+
padding: 0;
17+
transform-origin: 0 0;
18+
background: lime;
19+
/* Freeze the animation at the midpoint. */
20+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
21+
animation-duration: 1000000s;
22+
animation-delay: -500000s;
23+
}
24+
@keyframes anim-1 {
25+
to {
26+
translate: 50px 50px;
27+
rotate: 45deg;
28+
scale: 2 1;
29+
}
30+
}
31+
#div-1 {
32+
animation-name: anim-1;
33+
}
34+
@keyframes anim-2 {
35+
to {
36+
rotate: 45deg;
37+
scale: 2 1;
38+
translate: 50px 50px;
39+
}
40+
}
41+
#div-2 {
42+
animation-name: anim-2;
43+
}
44+
@keyframes anim-3 {
45+
to {
46+
transform: scale(2, 1);
47+
translate: 50px 50px;
48+
rotate: 45deg;
49+
}
50+
}
51+
#div-3 {
52+
animation-name: anim-3;
53+
}
54+
@keyframes anim-4 {
55+
to {
56+
transform: rotate(45deg) scale(2, 1);
57+
translate: 50px 50px;
58+
}
59+
}
60+
#div-4 {
61+
animation-name: anim-4;
62+
}
63+
@Keyframes anim-5 {
64+
to { transform: rotate(45deg); }
65+
}
66+
@Keyframes anim-6 {
67+
from { transform: none; }
68+
to { transform: translate(50px, 50px) rotate(45deg) scale(2, 1); }
69+
}
70+
/* anim-6 replaces anim-5 since both updating the transform property. */
71+
#div-5 {
72+
animation-name: anim-5, anim-6;
73+
}
74+
@keyframes anim-7 {
75+
to {
76+
rotate: 45deg;
77+
scale: 2 2;
78+
}
79+
}
80+
@keyframes anim-8 {
81+
from {
82+
translate: 0px 0px;
83+
scale: 1 1;
84+
}
85+
to {
86+
translate: 50px 50px;
87+
scale: 2 1;
88+
}
89+
}
90+
/*
91+
* The scale property is overridden in anim-8, but the rotate property
92+
* from anim-7 is still relevant and must be applied in the correct order
93+
* (after translate but before scale).
94+
*/
95+
#div-6 {
96+
animation-name: anim-7, anim-8;
97+
}
98+
</style>
99+
</head>
100+
<body>
101+
<div>
102+
<div id="div-1" class="block"></div>
103+
<div id="div-2" class="block"></div>
104+
</div>
105+
<div>
106+
<div id="div-3" class="block"></div>
107+
<div id="div-4" class="block"></div>
108+
</div>
109+
<div>
110+
<div id="div-5" class="block"></div>
111+
<div id="div-6" class="block"></div>
112+
</div>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)