Ladybug animation

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

LADYBUG ANIMATIONTOMMY ALHAMRA [30111490]WILDAN ABDUL MAJID [30111494]ARIYA YONDA DESTANTO [30111493]

1

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

Tampilan animasi kumbang yang berputar (berotasi)

TAMPILAN

2

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

STRUKTUR HTML PADA BODY

3Animasi ini full menggunakan css.

Pada Html hanya memanggil dari css

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

Dikarnakan kami mencoba animasi ini lewat browser crhome maka yang diedit untuk menggerakan animasi menggunakan @-webkit, jika mozila edit yang @-moz. Animasi bisa bergerak dikarnakan adanya keyframe. Dimulai

dititik 12% sampai 100% dan adanya koordinat

4

CARA MEMBUAT ANIMASI BERPUTAR

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

MEMBUAT SAYAP BEGERAK

5Membuat animasi sayap kiri bergerak

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

MEMBUAT MATA BERKEDIP

6Membuat animasi mata bergerak

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

MEMBUAT KAKI BERGERAK

7Membuat kaki depan bergerak

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

STRUKTUR CSS

8

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

STRUKTUR CSS

9

*begitu juga dengan sayap kanan menggunakan css yang sama

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

STRUKTUR CSS

10

*begitu juga dengan mata kanan menggunakan css yang sama

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

STRUKTUR CSS

11

*begitu juga dengan kedipan mata kanan menggunakan css yang sama

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

STRUKTUR CSS

12

*begitu juga dengan bola mata kanan menggunakan css yang sama

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

STRUKTUR CSS

13

*begitu juga dengan kaki tengah dan kaki kiri menggunakan css yang sama

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

LADYBUG ANIMATION

14https://developer.mozilla.org/en-US/demos/detail/ladybug

*jika ingin mencoba aplikasi dari mozila silahkan kunjingi situsnya dan download source codenya

05/0

1/20

23M

CC-1

1-01

TEL

KOM

APP

LIED

SCH

OO

L

Terimakasih

15