- From: Florian Rivoal <florian@rivoal.net>
- Date: Tue, 12 Apr 2016 11:36:17 +0900
- To: Sebastian Zartner <sebastianzartner@gmail.com>
- Cc: Mark Straver <mark@wolfbeast.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, Rik Cabanier <cabanier@gmail.com>, Xidorn Quan <quanxunzhen@gmail.com>, Simon Fraser <smfr@me.com>, www-style list <www-style@w3.org>
> On Apr 10, 2016, at 21:45, Sebastian Zartner <sebastianzartner@gmail.com> wrote: > > On 9 April 2016 at 02:17, Mark Straver <mark@wolfbeast.com> wrote: >> >> Hey Folks, >> >> On 09/04/2016 01:12, Sebastian Zartner wrote: >>>> This has multiple, significant effects on animation, too. >>>> "transparent" is no longer an animatable value (impossible to smoothly >>>> move from it to any other color), so any gradient using "transparent" >>>> stops being animatable too. To make it animatable, you have to >>>> manually put in the two RGBA steps, which means you have to double-up >>>> that step for any other gradient you're animating with this one. >>> >>> The same rules for gradient color transitions apply to animations. So >>> it would still be animatable. >>> Reusing the example from above the transtion between the colors would >>> be rgba(255,0,0,1) @ 0% -> rgba(255,0,0,0) @ 50% -> rgba(0,0,255,0) @ >>> 50% -> rgba(0,0,255,1) @ 100% for an animation like this: >>> >> [snip] >> >> I think Tab's main objection is that a transparent stop itself (especially >> when "in the middle") would be more difficult to animate to another >> (not-transparent) color because it would influence the surrounding gradients >> rather sharply. > > Note that I was talking about animating plain colors, not gradients. > Of course animating gradients requires more math when 'transparent' is > special-cased, though it isn't that complicated either. While I see the potential benefit of making transparent magic, I am not entirely sure how you'd animate. If the author is asking for an animation from linear-gradient(red, white ,blue) to linear-gradient(red, transparent, blue), what do you do? Something like the following steps? linear-gradient(red, rgba(255,255,255,1), blue) /*(red, white ,blue)*/ linear-gradient(red, rgba(255,255,255,0), blue) linear-gradient(red, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 50%, blue) linear-gradient(red, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue) /*(red, "magic" transparent, blue)*/ - Florian
Received on Tuesday, 12 April 2016 02:36:47 UTC