Add floating animation #1322
Add floating animation #1322
Conversation
|
This is a good idea, we'll definitely add this and I'm gonna tweak it a bit. Can we add this to v5 @eltonmesquita? |
|
That's a good idea! |
| from { | ||
| transform: translate3d(0, 0, 0); | ||
| } | ||
| to { | ||
| transform: translate3d(0, -40px, 0); | ||
| } |
There was a problem hiding this comment.
This could use some easing. It's a bit too stiff for a 'float' animation.
| .floatItem { | ||
| animation: floatItem 3s; | ||
| animation-direction: alternate; | ||
| animation-iteration-count: infinite; |
There was a problem hiding this comment.
Being only an infinite animation is not the best way to do this. Bake the return into the keyframe itself and don't rely on the animation-iteration-count property as many people use the keyframes directly.
There was a problem hiding this comment.
it's not necessary but if u will use short hand property of animation it will be bater
|
BTW, you'll also have to compile the source code using |
|
Any news on the requested changes @cedricfortuin? |
|
I guess no updates @eltonmesquita can I help with his PR? |
| .floatItem { | ||
| animation: floatItem 3s; | ||
| animation-direction: alternate; | ||
| animation-iteration-count: infinite; |
There was a problem hiding this comment.
it's not necessary but if u will use short hand property of animation it will be bater
| .floatItem { | ||
| animation: floatItem 3s; | ||
| animation-direction: alternate; | ||
| animation-iteration-count: infinite; |
This is the pin: https://codepen.io/cedricfortuin-the-animator/pen/JjNdywr.
I missed this one in the docs and its quite a nice one for stuff like in the pin.