W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: [css3-animations] "Applies To" lines are wrong

From: Alan Gresley <alan@css-class.com>
Date: Fri, 15 Apr 2011 23:52:19 +1000
Message-ID: <4DA84D93.3050809@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
On 13/04/2011 1:44 AM, Tab Atkins Jr. wrote:
> On Mon, Apr 11, 2011 at 9:29 PM, L. David Baron<dbaron@dbaron.org>  wrote:
>> All of the property definitions in css3-animations should have the
>> same change applied to them as was applied to css3-transitions to
>> fix http://lists.w3.org/Archives/Public/www-style/2009Jun/0479.html :
>> they should apply to "all elements, :before and :after pseudo
>> elements".
> (Slight tangent.)

Houston, we have have problem.

I think I now realize what David is talking about. WebKit does not apply 
the animation on :before and :after but on the element that generates 
them (either 2D or 3D transforms).

On testing Aurora (supports animation of 2D transforms), I have notice 
that that Aurora animates the same as WebKit does with 2D transforms 
with elements with generated content but can also independently animate 
the generated content (:before and :after) itself. WebKit does not do this.

I believe Aurora's behavior is good and desired from an author's 

A test (I have provide CSS comments to swap around).

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

body, div { margin: 1em 0 }

.frame { background:lime; height:200px; width:200px; top:0px; left:0; }

.frame::after { background: blue; width: 200px; height:200px; 
position:absolute; left:200px; content: '.'; }
@-webkit-keyframes t2d {
	from { -webkit-transform: rotate(0deg); }
	to   { -webkit-transform: rotate(360deg); }
@-webkit-keyframes t3d {
	from { -webkit-transform: rotateX(0deg); }
	to   { -webkit-transform: rotateX(360deg); }
@-moz-keyframes t2d {
	from { -moz-transform: rotate(0deg); }
	to   { -moz-transform: rotate(360deg); }

.test-2d::after {
	-webkit-animation: t2d 10s infinite linear;
	-moz-animation: t2d 10s infinite linear;
.test-3d::after {
	-webkit-animation: t3d 10s infinite linear;


.test-2d {
	-webkit-animation: t2d 10s infinite linear;
	-moz-animation: t2d 10s infinite linear;
.test-3d {
	-webkit-animation: t3d 10s infinite linear;


   <div class="frame test-2d">Frame</div>

   <div class="frame test-3d">Frame</div>


Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Friday, 15 April 2011 13:52:52 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC