Assignment 3: Transforms, transitions, animations

Until now, our sketches are quite rectengular and static.
Today we wan’t to continue with our geometrical patterns and sketches, but add effects, animations, interactions, ...

1. Fork one of your existing sketches or quickly start a new one. Play around with the following properties to make your HTML elements less boxy:

• border-radius for round corners
• transform to manipulate the appeareance of an element
• gradients as background color
• Mouse interactions using the :hover pseudo-selector
• box-shadow

These links might help you:

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

2. Use the :hover pseudo-class to manipulate properties:

h1 {
    color: red;
}
h1:hover {
    color: blue;
}

3. Use transition to morph between diffenrent states.

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

4. Another way to add movement to our skteches is with animation. While transition only alternates between 2 states, a CSS animation can follow a complex chain of keyframes.
   Fork or start a new pen to create a small animation.

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

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