-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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}
- Loading branch information
1 parent
f6d3768
commit 04ab41d
Showing
2 changed files
with
159 additions
and
0 deletions.
There are no files selected for viewing
45 changes: 45 additions & 0 deletions
45
css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order."/> | ||
<style> | ||
@keyframes anim { | ||
to { | ||
transform: translate(50px, 50px) rotate(45deg) scale(2, 1); | ||
} | ||
} | ||
.block { | ||
display: inline-block; | ||
width: 50px; | ||
height: 50px; | ||
margin: 50px; | ||
padding: 0; | ||
transform-origin: 0 0; | ||
background: lime; | ||
/* Freeze the animation at the midpoint. */ | ||
animation-timing-function: cubic-bezier(0, 1, 1, 0); | ||
animation-duration: 1000000s; | ||
animation-delay: -500000s; | ||
animation-name: anim; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div> | ||
<div class="block"></div> | ||
<div class="block"></div> | ||
</div> | ||
<div> | ||
<div class="block"></div> | ||
<div class="block"></div> | ||
</div> | ||
<div> | ||
<div class="block"></div> | ||
<div class="block"></div> | ||
</div> | ||
</body> | ||
</html> |
114 changes: 114 additions & 0 deletions
114
css/css-transforms/individual-transform/animation/individual-transform-ordering.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order when animating."/> | ||
<link rel="match" href="individual-transform-ordering-ref.html"> | ||
<style> | ||
.block { | ||
display: inline-block; | ||
width: 50px; | ||
height: 50px; | ||
margin: 50px; | ||
padding: 0; | ||
transform-origin: 0 0; | ||
background: lime; | ||
/* Freeze the animation at the midpoint. */ | ||
animation-timing-function: cubic-bezier(0, 1, 1, 0); | ||
animation-duration: 1000000s; | ||
animation-delay: -500000s; | ||
} | ||
@keyframes anim-1 { | ||
to { | ||
translate: 50px 50px; | ||
rotate: 45deg; | ||
scale: 2 1; | ||
} | ||
} | ||
#div-1 { | ||
animation-name: anim-1; | ||
} | ||
@keyframes anim-2 { | ||
to { | ||
rotate: 45deg; | ||
scale: 2 1; | ||
translate: 50px 50px; | ||
} | ||
} | ||
#div-2 { | ||
animation-name: anim-2; | ||
} | ||
@keyframes anim-3 { | ||
to { | ||
transform: scale(2, 1); | ||
translate: 50px 50px; | ||
rotate: 45deg; | ||
} | ||
} | ||
#div-3 { | ||
animation-name: anim-3; | ||
} | ||
@keyframes anim-4 { | ||
to { | ||
transform: rotate(45deg) scale(2, 1); | ||
translate: 50px 50px; | ||
} | ||
} | ||
#div-4 { | ||
animation-name: anim-4; | ||
} | ||
@Keyframes anim-5 { | ||
to { transform: rotate(45deg); } | ||
} | ||
@Keyframes anim-6 { | ||
from { transform: none; } | ||
to { transform: translate(50px, 50px) rotate(45deg) scale(2, 1); } | ||
} | ||
/* anim-6 replaces anim-5 since both updating the transform property. */ | ||
#div-5 { | ||
animation-name: anim-5, anim-6; | ||
} | ||
@keyframes anim-7 { | ||
to { | ||
rotate: 45deg; | ||
scale: 2 2; | ||
} | ||
} | ||
@keyframes anim-8 { | ||
from { | ||
translate: 0px 0px; | ||
scale: 1 1; | ||
} | ||
to { | ||
translate: 50px 50px; | ||
scale: 2 1; | ||
} | ||
} | ||
/* | ||
* The scale property is overridden in anim-8, but the rotate property | ||
* from anim-7 is still relevant and must be applied in the correct order | ||
* (after translate but before scale). | ||
*/ | ||
#div-6 { | ||
animation-name: anim-7, anim-8; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div> | ||
<div id="div-1" class="block"></div> | ||
<div id="div-2" class="block"></div> | ||
</div> | ||
<div> | ||
<div id="div-3" class="block"></div> | ||
<div id="div-4" class="block"></div> | ||
</div> | ||
<div> | ||
<div id="div-5" class="block"></div> | ||
<div id="div-6" class="block"></div> | ||
</div> | ||
</body> | ||
</html> |