Animation Biene HTML/CSS

Impressionen

Entwicklung

Als Abschlußprojekt vom Aufbaukurs HTML/CSS entstand diese tolle Animation. Alle Elemente (Wolken und Biene) wurden von mir mit reinem Code in SCSS programmiert. Nur der Hintergrund wurde als Bild eingefügt. Die Animationen selbst habe ich als keyframe gelöst.

Herausforderung

Da alle Elemente aus reinem Code bestehen, war zuvor eine gute Vorbereitung wichtig. Auf meinem Whiteboard zeichnete ich die Biene mit deren einzelnen Komponenten auf. So war es mir möglich die genauen Anordnungen später reibungslos zu coden.

Die Animation selbst stellte sich als kleine Herausforderung dar, denn es zählte jede Millisekunde, damit der Flug der Biene flüssig lief.

Video Einblicke

Biene animiert

fliegende Biene