search

AlexeyBelezeko / TBIconTransitionKit

TBIconTransitionKit is an easy to use icon transition kit that allows to smoothly change from one shape to another.
MIT License
1.25k stars 153 forks source link

Thanks for inspiring my CSS implementation. #2

Open abacaj opened 9 years ago

abacaj commented 9 years ago

http://codepen.io/abacaj/full/bdKPEz

AlexeyBelezeko commented 9 years ago

Nice @abacaj ! But you used only start end transform. For smooth and pixel perfect animation you have to use intermediate transforms and custom timing function.

abacaj commented 9 years ago

Update: I didn't have vendor-prefixes enabled view it again: http://codepen.io/abacaj/full/bdKPEz

Hey @AlexeyBelezeko Can you provide more details? I am not sure what you mean by only start & end transform?

I am also using custom timings like so:

transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1);
transition-delay: 0.25s, 0s, 0.25s, 0s, 0s;

As far as I know the custom timing function is cubic-bezier, which I used.

What browser are you using? On chrome it performs just like your Gif animation.