[CSS3] Animacja Opcje

[dareksbs]

Witam,

Na swojej stronie chcę zrobić małą animacje kilku chmurek i rakiety, problem w tym że nie wiem jak się do tego zabrać, na początku chciałem to zapisać w gifie, ale wszystko ważyło 14 mb ;D więc stwierdziłem że pora użyć html5 z css3. Ogólnie chce aby chmurki poruszały się w prawo z różną prędkością a rakieta latała między nimi.

i teraz, umiem zrobić animację używając jednego obiektu, ale co jeśli jest ich kilka ? i niektóre mają przelatywać przez siebie ? wtedy wycinamy tylko obiekty które będziemy animować i na początku pozycjonujemy je jakimiś merginesami ? a potem używamy @keyframes (IMG:style_emoticons/default/questionmark.gif)

Jaki jest najlepszy sposób na animacje takiego obrazka :

(IMG:http://www.iv.pl/images/96271258535514387070.png)

[WiruSSS]

Moim zdaniem jeśli coś da się uzyskać za pomocą CSS powinno być priorytetem z prostej przyczyny. CSS jest przez przeglądarkę obsługiwany natywnie i zawsze będzie wydajniejszy od JS. Druga korzyść względem js jest taka, że javascript zawsze można wyłączyć co unieruchomi animację (chociaż np nowy FF ukrył tę funkcję w configu zaawansowanym) a CSS nie. To co opisujesz da się bez problemu w CSS uzyskać. Tutaj masz gotowca wystarczy dodać rakietkę (IMG:style_emoticons/default/smile.gif) http://thecodeplayer.com/walkthrough/pure-...ouds-background

Ten post edytował WiruSSS 17.09.2013, 23:40:53