Re: [css-transforms] Making 'transform' match author expectations better with specialized 'rotate'/etc shorthands

On 13/07/2014 12:32 PM, Tab Atkins Jr. wrote:
> On Fri, Jul 11, 2014 at 11:42 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> 3. Animate an element rocking back and forth with a rotate. On hover,
> scale the element up slightly:
>
> Old:
>
> LITERALLY IMPOSSIBLE (without quitting and using JS to do the whole thing)
>
> New:
>
> @keyframes sway { 0%, 50%, 100% { rotate: 0deg; }, 25% { rotate:
> 10deg; }, 75% { rotate: -10deg; } }
> el { animation: sway 3s infinite; }
> el:hover { scale: 1.1; }

I can do that without JS. What is impossible is a transition on hover 
and the transition *only fires* when you un-hover. A demo is below. 
Having 'scale' as a separate property allows the full power of transition.

<style type="text/css">

div {
   width: 400px;
   height: 100px;
   background: blue;
   margin: 100px auto;
   animation: sway 3s infinite linear;
   transition: 1s;
}


@keyframes sway {
   0%, 50%, 100% { transform: rotate(0deg); }
   25% { transform: rotate(10deg); }
   75% { transform: rotate(-10deg); }
}

div:hover {
   animation: sway2 3s infinite linear;
   transition: 1s; /* DOES NOT WORK */
}

@keyframes sway2 {
   0%, 50%, 100% { transform: rotate(0deg) scale(1.5); }
   25% { transform: rotate(10deg) scale(1.5);}
   75% { transform: rotate(-10deg) scale(1.5); }
}

</style>

<div></div>


Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/