<!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>
Codebase Browser
chromium