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

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 
perspective.

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


<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<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;
}
*/


</style>
</head>
<body>

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

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

</body>
</html>



-- 
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