Re: css-tricks’ menu

[jonathansampson]

Paula,

The menu uses keyframe/animations to animate the background color, as well as media queries to restructure itself under varying browser-widths.

Keyframes

Here’s an example that resembles that of CSSTricks:

@keyframes fadeToBlue {

50% { background: blue }

}

This creates a keyframe animation called “fadeToBlue”. If any element is animated with animation, that elements background will be changed to “blue” at half-way through the animation. You could further complicate this by adding 75% markers, and more.

We apply this to elements using the “animation” property.

.foo:nth-child(1) { animation: fadeToBlue 1.5s 1.0s ease 1; background: red }

This finds the first .foo element in a container and sets its animation property to “fadeToBlue”.

Further, it instructs the browser to make the animation last 1.5 seconds, and be delayed 1 second. So 1 second after the page loads, our animation will run for 1.5 seconds on the first .foo element in any container.

The next value, “ease”, refers to the timing-function that is used on the animation.

Lastly, the 1 refers to the iteration-count. This instructs the animation to happen only once, an no more.

So if we have numerous elements we want to animation, we can do so by simply incrementing the delay on each. For the first, run it at 1 second. The second will be ran at 1.2 seconds. The third at 1.4 seconds, and so on. This would look something like the following:

.foo:nth-child(1) { animation: fadeToBlue 1.5s 1.0s ease 1; background: red }

.foo:nth-child(2) { animation: fadeToBlue 1.5s 1.2s ease 1; background: green }

.foo:nth-child(3) { animation: fadeToBlue 1.5s 1.4s ease 1; background: orange }

.foo:nth-child(4) { animation: fadeToBlue 1.5s 1.6s ease 1; background: silver }

.foo:nth-child(5) { animation: fadeToBlue 1.5s 1.8s ease 1; background: maroon }

.foo:nth-child(6) { animation: fadeToBlue 1.5s 2.0s ease 1; background: olive }​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Notice how each .foo element will be delayed .2 seconds more than the .foo element that precedes it. This gives our animation that riding effect from left to right.

Experiment with this effect: http://dabblet.com/gist/2996529

Important: I have not used any vendor prefixes (such as -webkit-, -moz-, -o-, or -ms-) in the above code. You will need to use these, leading to verbose code, or consider a tool like -prefix-free which lets you write unprefixed code and it handles the prefixes for you.