How to stop animation by hover?

[Funkaholik]

Hi there ..
can you help me put with this
i want animation not to start from the begining after hover out
but keep going from its position before hover on

also i forgot how to make hover have a slower attack ((

here is an example http://codepen.io/Funkaholik/pen/BLVZjQ

[Shikkediel]

How about this idea?

The 8.33% comes from:

(1 - (1/scale)) / 2

That will make it keep the top position (I think).

[Shikkediel]

Scratch that last bit, transform-origin is more appropriate…

Edit – not exactly right as it scales the current size. Just trying to get there without any JS.

[Funkaholik]

seems like you got it
but can hover like slow a breath-animation not just act like bam here i am?

[Shikkediel]

I’ve added a transition-duration to h. That what you mean?

It doesn’t stay at the top position like that exactly but I think it’s actually a nice effect that it doesn’t.

[Funkaholik]

now it’s kinda scales up and jumps in the front too obviously
what if set scaling just a lil bigger on hover and let it just slowly freeze?
check this out

But now it needs a transition-duration for hover out)
also it’l be supa cool to keep a lil scaling going back and forth on hover
or keep it at :focus so it’ll be like waving

[Shikkediel]

I think you’ll be needing JavaScript for that…

Link

[Paulie_D]

To pause an animation on hover you can use animation-play-state: paused

It will then restart from it’s paused state when you remove the hover.

http://codepen.io/Paulie-D/pen/KgBmWk

[Funkaholik]

it’s still has that kick after smooth resize back after hover off
i’m more like previous version

thanx again .. it’s supa cool

[Funkaholik]

we got that already)
maybe you can figure out how to keep a smooth resizing animation
back and forth on hover .. so it will have a waving effect?

retty much make that scaling when hover on going infinite alternate

[Shikkediel]

I’m not exactly sure what you’re after there myself…

[Funkaholik]

excuse me .. not quite understood last comment

[Paulie_D]

What we are saying is that we cannot understand what it is you are trying to achieve.

You asked how to stop an animation on hover and the restart it from the same place.

But your additional comments seem to indicate you want something more than that…but we don’t understand what.

[Funkaholik]

i’m pretty happy with the result actually)) thanx a lot

and what about my request
does anybody has a windowsphone (you know that Mr.Bean’s phone))
when you move press/hold icons on desktop to replace them or whatever
other icons start floating a bit from side to side

so i think that’s what i meant before

i believe i just need to add a bit of padding or marging on hover animation or so

[Author]

Posts