Как помахать листочком?

Question

[crdrads]

Как помахать листочком более естественно, т.е. чтоб нижняя часть (корешок) оставался на месте а остальное тряслось? https://codepen.io/anon/pen/REReWK

Пробовал менять origin, но не помогло, может не так делал? Что лучше анимировать для такого эффекта?

Comments

[shmatuan]

Поставить 0.5s, но в любом случае лучше использовать уже что-то анимированное, что бы изменяло форму как и настоящий листик)
так это будет просто движение статичного листика

[crdrads]

shmatuan,

но в любом случае лучше использовать уже что-то анимированное, что бы изменяло форму как и настоящий листик

Чего-чего?

[shmatuan]

crdrads, Вы когда-нибудь видели листик на дереве, который под порывом ветра просто весь смещается вбок и обратно, не меняя формы и всегда повернутый в одну сторону?
Поэтому лучше чем gif в css не получится создать

[crdrads]

shmatuan, какой нахер гиф?))) Может мне еще видео документальное записать?

[shmatuan]

crdrads, motion capture листочка :D

[Митя ТоДаСё]

я бы попробовал

1. перевести анимацию со всего листа c #mongo-logo на #path2, #path8, дал бы им z-index выше чем у корешка
   
2. поместить корешок на самый нижний слой, сделать его верх шире, чтобы белых пробелов не было
   
3. ну и скорость анимации на 0.3-0.4 поставить
   

Answer 1

[Александр]

так

Comments

[crdrads]

Не, хардкодить ширину свг нельзя.