[!] [=title "Week 13 Homework"] [=content-]

This week we're focusing entirely on `hover` and `transition`. Keep the lecture notes for both handy (here and here).

Note that parts 3 and 4 are fairly difficult. Get started early!

# Part 1: Ain't It Click?

Let's start by using a `span` to replicate the behavior of the `a` tag. uses a span. The end result shouldn't actually be clickable, but should have the same color and hover effect has a hover effect that changes its color.

It's okay if you can't figure out exactly which colors an `a` tag switches between; `white` and `yellow` (the style I used for this website) is fine. Don't forget the underline! visually identical to a link (Hint: you may use any technique you wish as long as it's applied to a `span`, but this exercise is considerably easier if you have text-decoration).

Make sure to use the `:hover` pseudo-class.

# Part 2: Animate It!

Duplicate your replicated link (do NOT change the original!) and add any transition to it a working transition - it should be smooth and noticeable, and you should transition at least two properties multiple properties animated (e.g. both `color` and `background-color`). I recommend using this as an opportunity to play around with various transitions.

# Part 3: Functions?

This has a bit of math - if you have trouble with that part, please send me an email.

Transitions support a few different types of timing function - these are curves that describe how "fast" it moves between states. For instance, the default curve is an S-shape - it starts out slow, then speeds up around halfway through, then slows down again for the end. This timing function is called `ease`. It produces a very nice smooth animation that feels natural.

But there are others! So, for this part, practice researching on your own to figure out,

- What curves exist and how they behave
- How to actually use them

A good starting point is MDN; you may also find some luck with W3Schools.

Find at least three timing functions (besides the default `ease`) and demonstrate each of them with `background-color` and `:hover`. Make sure to clearly label them. (Read the lecture notes if this is confusing). At least 3 timing functions, demonstrated properly

# Part 4: Bouncy Gallery

Use `:hover`, `transition`, and CSS Grid (make sure to read both Grid lecture notes if you're struggling with grid) to make a "bouncy gallery" of transitioned elements hover, transition, and grid in use. There should be 3 columns and at least 2 rows 3 columns, minimum 6 cells. Explain each effect with text in its cell.

The requirements for this one are loose - you don't have to include any specific combination of effects. However, it would be passable for each cell to contain just a span with an animated background-color using different transition durations and timing functions. distinct transitions for each demonstration.

The goal of this is for you to experiment with new CSS properties. I highly recommend being creative with this one - you might hit on a design you really like for links or buttons on your website!

# Extra Credit

For a whopping 15 points of extra credit, teach yourself about `box-shadow` and do a transitioned box-shadow on at least one of your Bouncy Gallery elements.

Box-shadow is incredibly fun and worth learning - it adds a 3d "pop" to otherwise flat pages.

# Self-Study

As if this homework didn't have enough research! To get ahead on the animations material, read about actual animations on W3Schools - CSS exposes a much more powerful way to do animations; it's a lot more complicated than `transition`, but allows for some incredibly intricate behavior.

# Submission

Don't forget to email me before the due date - April 10th. I need to get the email so I know when you finished and can view your website's git history from that date.

[/] [#template.html]