Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transforms/individual-transform/animation/individual-transform-combine.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<meta name="assert" content="Tests that we combine animated transformations with the underlying style correctly."/>
<link rel="match" href="individual-transform-combine-ref.html">
<style>
.block {
display: inline-block;
width: 50px;
height: 50px;
margin: 50px;
padding: 0;
transform-origin: center center;
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 { rotate: 180deg; }
}
#div-1 {
scale: 2 1;
animation-name: anim-1;
}
@keyframes anim-2 {
from { scale: 1 1; }
to { scale: 3 1; }
}
#div-2 {
/* The scale property is replaced in the animation. */
scale: 1 3;
rotate: 90deg;
animation-name: anim-2;
}
@keyframes anim-3 {
to { rotate: 180deg; }
}
#div-3 {
transform: scale(2, 1);
animation-name: anim-3;
}
@keyframes anim-4 {
to { transform: scale(7, 1); }
}
#div-4 {
rotate: 90deg;
/* As transform is a separate property from scale, the two scales are
chained together. */
scale: 0.5 1;
animation-name: anim-4;
}
/* transform origin tests */
@keyframes anim-5 {
to { rotate: 180deg; translate: 100px -50px; }
}
#div-5 {
transform-origin: top left;
scale: 2 1;
animation-name: anim-5;
}
@keyframes anim-6 {
to { rotate: 180deg; translate: -100px 50px; }
}
#div-6 {
transform-origin: bottom right;
scale: 2 1;
animation-name: anim-6;
}
</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>