- From: Brice PARENT <brice@websailors.fr>
- Date: Fri, 28 Jun 2013 16:59:29 +0200
- To: www-style@w3.org
Hello ! My idea would be to allow the use of different transitions depending on the direction of the transition. By direction, I mean whether the value is increased or decreased during the transition. This would allow simple things like : #my_element{ width:50px; height:50px; opacity:0.2; transition: width-increase 1s, width-decrease 1s 1s, height-increase 1s 1s, height-decrease 1s, opacity-increase: 0.5s 1.5s, opacity-decrease: 0.5s; } #my_element:hover{ width:100px; height:100px; opacity:1; } In this case, when we hover #my_element, it would grow, starting horizontally, ending vertically. The opacity would increase when the element is almost big. When we move the pointer elsewhere, it would revert fully the animation, decreasing the opacity and the height right at the beginning, and ending with the width. The use of the properties without direction would overwrite both of them, so : transition: width-increase 1s, width: 2s, width-decrease 1s 1s; would be the same as transition: width: 2s, width-decrease 1s 1s; Those special properties would of course only exist when they are relevant, like lengths, percentages, calc()s, number and integer (equivalents might be found for other value types, like visibility-appear and visibility-disapear). Of course, it would also allow to have a long animation when showing an element and a quick one when hiding it. Would that be very complicated to create? -- *Brice PARENT*
Received on Friday, 28 June 2013 14:59:59 UTC