CSS-Animation am Beispiel eines Fischleins
Kommentare

Zeichnungen sind eine gute Art, User visuell in euren Bann zu ziehen und die CSS-Muckis zucken zu lassen. Aber noch mehr Eindruck schindet man mit CSS-Animationen.

Joni Trythall hat das auf html5hub.com mit ihrem kleinen CSS-Fisch Franklin versucht, und ihr könnt den Prozess Schritt für Schritt mit ihr durchgehen. Neben hilfreichen zusätzlichen Quellenangaben findet ihr auch Codebesipiele und eine Demo. Auf der Tagesordnung stehen:

  • CSS Drawing
  • Keyframes
  • Keyframe Moments
  • Point of Origin
  • Translate
  • Rotation
  • Assigning Animation

Am Ende ist Franklin kein starres Fischstäbchen mehr, sondern schwimmt munter durch animierte Blubberblasen. Wie’s geht, lest ihr unter CSS Animations With Franklin. Viel Spaß!

Aufmacherbild: gold fish jumping out of water in fishbowl von Shutterstock / Urheberrecht:Sergey Nivens

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -