Valaki, aki ért a html/css-en belüli animáció készítéshez (transform, transition) tudna segíteni? Lenne 1-2 konkrét kérdésem.

Az egyik, hogy hogyan lehetséges egy akcióra (mondjuk hoverre) egynél több transformot megadni? Konkrétan azt szeretném, hogy hoverre egy kép lentebb menjen mondjuk 50px-el, aztán abból a pozícióból újra föl pár pixelnyit, de még a hover parancsra.

A másik, hogy hogyan megoldható, hogy ha hoverre reagál, és a transform után lehúzom az objektumról az egeret, akkor ne alapállapotba helyezze, hanem egy másik, transformot hajtson végre? Konkrétan mondjuk középen lévő tartó div fölé viszem az egérmutatót és föntről középre kúszik be a kép, viszont azt szeretném, hogy ha leviszem róla a mutatót, akkor ne középről menjen vissza fölfelé, hanem elhalványodjon.

Még konkrétabban ezt csináltam:

https://www.youtube.com/watch?v=R7amcs_9ldw

De azt szeretném, hogy a fehér háromszögek egy kicsit tovább menjenek középre, mielőtt beállnak a pozícióba, és egér lehúzásra az elemek elhalványuljanak.