- From: Perry Smith <pedzsan@gmail.com>
- Date: Mon, 5 Apr 2010 15:30:52 -0500
- To: www-style@w3.org
We have :hover for when the mouse hovers. We have essentially the unadorned selector for the normal state. I'm now beginning to understand the resistance to on-entry or other event based styles. I have some confusion with animations. Perhaps the example below is just someone making a mistake but if someone does: @keyframes baduse { from { } 30% { left: 80px; } 60% { left: 120px; } to { left: 80px; } } This is the opposite of Simon's case, but my understand is that at the end of the animation, the element would pop back to the original position from the 80px position. It would be nice if we could specify everything using percentages. Note that we can already specify the time as a percentage. For example: @keyframes left-slide { from { } 25% { left: 50%; } 50% { left: 100%; } 75% { left: 50%; } to { } } And it would be nice if we have another @ item for transitions. I'll use @transition. Now, we have some ability to reuse pieces. To understand my ideas, an animation starts in state A and ends in state A even if that means a sudden jerk at the end. A transition starts in state A and ends in state B. state A is the state of the element before any animation or transition. state B is the state after all the transitions are completed. (Essentially using the same concepts or terms that the transitions and animations documents use now in this area.) So, lets say we have the left-slide @keyframes (above) and an @transition that looks maybe like: @transition slide-up-down { from { } 25% { top: 25%; } 50% { top: 50%; } 75% { top: 75%; } to { top: 100% } } couple with two uses: div /* normal */ { top: 100 px; left: 100 px; transition-sequence: slide-up-down 1s, left-slide 1s 50px } (I have some obvious inconsitences in that notation) div:hover { top: 0px; left: 0px; transition-sequence: left-slide 1s 50px, slide-up-down 1s } When the user hovers the mouse, the div will do a left-slide for 1 second by 50 px (which moves back and forth once) and then it will slide up to the top=0 position. When the user moves the mouse and stops the hover, the box will slide down to the top=100 position over the course of 1 second, then it will do a left slide by 50px (as specified in the normal div entry) One new idea presented here is that using percentages in as many places as possible allows for the transitions and animations to be reused. Their final amounts would be like parameters being passed in. This only applies to animations since transitions already have a "from" and a "to", it only needs a "how". animations need a "how much" that a transition does not have. (This idea is not essential to the other two ideas.) The second new idea is an @keyframe type notation for transitions. The third (which is not new at all -- just a realization on my part) is that the css for the normal state can specify the transition and animation when that state is entered. We don't need on-entry or on-exit concepts. The last idea is the 'transition-sequence' attribute to string a sequence of them together where "them" includes animations. There might also be a desire along with transition-sequence, to add a "parallel" method so that multiple animations or transitions could be done at the same time (i.e. move left and darken). But, that ability already exists by putting the parallel activies inside the @ block and I believe that that will be more clear and easier to manage. Perry
Received on Monday, 5 April 2010 20:31:28 UTC