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

RE: when do transitions occur?

From: Brian Manthos <brianman@microsoft.com>
Date: Thu, 15 Sep 2011 09:41:20 +0000
To: Øyvind Stenhaug <oyvinds@opera.com>, "L. David Baron" <dbaron@dbaron.org>
CC: "www-style@w3.org" <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D17161428@TK5EX14MBXC266.redmond.corp.microsoft.com>
You're on target, Øyvind.  Apparently I just can't type this example correctly.  Nonetheless, I'll try again.

Example A (corrected again)
	from	{ background: blue; }
	to	{ background: linear-gradient(red, blue); }


Regarding David's comment about background-image not being animatable, this WD suggests it is somewhat supported...
http://www.w3.org/TR/css3-transitions/#properties-from-css-

# 	background-image	only gradients

In case he's right and that spec is stale...

Example B
	from	{ background: blue; }
	to	{ background: 12px 34%; }


Even so, my recollection from the former ED of CSS3 Images was that none -> linear-gradient wasn't animatable so Example A still wouldn't be interesting from an image standpoint. So...

Example C
	from	{ background: red linear-gradient(white, blue); }
	to	{ background: blue linear-gradient(white, red); }

For C, background-color and background-image would transition and associated events would be sent for both properties.

The question is whether a background event should be fired as well.

As hinted by Tab's observation about "future shorthanding", the assertion that a background transition should not fire is debatable.


Let's get more concrete.

Example D (CSS3)
	from	{ text-shadow: 1px 2px 3px red; }
	to	{ text-shadow: 1px 2px 3px blue; }

Example E (CSSn, where n > 3)
	from	{ text-shadow: 1px 2px 3px pink; text-shadow-color: red; }
	to	{ text-shadow: 1px 2px 3px cyan; text-shadow-color: blue; }

Should a text-shadow transition event fire for case D (non-shorthand) but not for case E (shorthand)?


I would expect the 4 scenarios to behave as follows.


CSS3 browser - Example D
1. text-shadow event ("1px 2px 3px red" -> "1px 2px 3px blue")

CSS3 browser - Example E
1. text-shadow event ("1px 2px 3px pink" -> "1px 2px 3px cyan")

CSSn browser - Example D
1. text-shadow event ("1px 2px 3px red" -> "1px 2px 3px blue")
2. text-shadow-color event ("red" -> "blue")

CSSn browser - Example E
1. text-shadow event ("1px 2px 3px red" -> "1px 2px 3px blue")
2. text-shadow-color event ("red" -> "blue")


> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
> Behalf Of Øyvind Stenhaug
> Sent: Thursday, September 15, 2011 1:48 AM
> To: L. David Baron
> Cc: www-style@w3.org
> Subject: Re: when do transitions occur?
> 
> On Thu, 15 Sep 2011 00:54:37 +0200, L. David Baron <dbaron@dbaron.org>
> wrote:
> 
> > On Wednesday 2011-09-14 22:13 +0000, Brian Manthos wrote:
> >> Ok.  For clarification purposes...
> >>
> >> If background-image *was* currently animatable, would your answer be
> A5?
> >
> > Yes.
> 
> You lost me. The computed value of background-image doesn't change when
> going from "background: blue;" to "background: none;".
> 
> Then again this seems to cause a mismatch between
> 
> >>>> A2: background-color
> >>>> A3: background-image
> >>>> A5: A2 and A3
> 
> and the reasoning:
> 
> >>>> A5: all longhands are involved in the delta, only include changed
> >>>> properties
> 
> --
> Øyvind Stenhaug
> Core Norway, Opera Software ASA
> 

Received on Thursday, 15 September 2011 09:41:51 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:44 GMT