Assignment 3: Transforms, transitions, animations

Until now, HTML elements are very rectangular for us. But luckily there are some things that we can do about it:

• border-radius for round corners
• transform to manipulate the appeareance of an element
• gradients as background color
• Mouse interactions using the :hover pseudo-selector
• transition to morph between diffenrent states
• animation to animate an element once or continously

1. We will now use those to make geometrical artworks from A.2 even more fun. You can either fork an existing pen or create a new artwork.

These links might help you:

• Our small CSS Reference
• Google CSS ... generator, CSS effects, CSS animation, CSS ...

Some examples

Use :hover in combination with transition. Note how the background is a sibling element to the button and still can be animated using the + combinator. Play with it on CodePen

CSS animation in combination with position. Play with it on CodePen

CSS animation in combination with transform. Play with it on CodePen

Sharing our work

Once you’re done, share it with your groupmates and also do not forget to send it to me, so that it can be included on this website.
This task is very well suited to produce 2 or even more pens.