- From: Alan Gresley <alan@css-class.com>
- Date: Sun, 13 Jul 2014 22:57:57 +1000
- To: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
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/
Received on Sunday, 13 July 2014 12:58:35 UTC