CSS Animations in Chrome with 'Experimental Web Platform' enabled

Playing around with CSS Animations today I was struggling to get even the simplest of animations working in Chrome (33.0.1750.117):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@-webkit-keyframes drive {
0% {
-webkit-transform: translate(0);
}
100% {
-webkit-transform: translate(600px);
}
}
@keyframes drive {
0% {
transform: translate(0);
}
100% {
transform: translate(600px);
}
}
.box {
width: 200px;
height: 200px;
background: red;
-webkit-animation: drive 3s infinite;
animation: drive 3s infinite;
}

What was strange is that it was working fine in the latest Safari.

I eventually managed to get it working by duplicating the -webkit-transform rules and adding them to the unprefixed @keyframes rule.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* Safari */
@-webkit-keyframes drive {
0% {
-webkit-transform: translate(0);
}
100% {
-webkit-transform: translate(600px);
}
}
/* Everything Else */
@keyframes drive {
0% {
transform: translate(0);
-webkit-transform: translate(0);
}
100% {
transform: translate(600px);
-webkit-transform: translate(600px);
}
}
.box {
width: 200px;
height: 200px;
background: red;
-webkit-animation: drive 3s infinite;
animation: drive 3s infinite;
}

Though I had no idea why Chrome was behaving this way.

By complete chance, about 30 minutes later Lea Verou was running into the exact same problem but managed to work out what was causing the behaviour.

The Enable Experimental Web Platform Features option in chrome://flags/ is currently using unprefixed @keyframes rules, but ignoring unprefixed transform declarations.

The original code example works with this flag in its default state: disabled. The second code example with the duplicated -webkit-transform declarations works when the flag is both enabled and disabled.

A bug report has been filed.