Now, for some icing on your Ottergram cake: You can create custom timing functions for your transitions instead of being limited to the built-in ones.

Timing functions can be graphed to show the transition’s progress over time. Graphs of the built-in timing functions (from the site cubic-bezier.com) are shown in Figure 7.19.

Figure 7.19  Built-in timing functions

The shapes in these graphs are known as cubic Bezier curves. The lines in the graphs describe the behavior of the animation over time. They are defined by four points. You can create custom transitions by specifying the four points that define a curve. Try the following cubic-bezier as part of your transition declaration for .detail-image-frame in styles.css.

...
.detail-image-frame {
  position: relative;
  text-align: center;

  transition: transform 333m cubic-bezier(1,.06,.28,1);
}
...

Save it and click on some thumbnails in the browser to see the difference in the transition.

Thanks to developer Lea Verou and her site cubic-bezier.com, creating custom timing functions is painless (Figure 7.20).

Figure 7.20  Creating a custom timing function with cubic-bezier.com

On the left side is a curve with red and blue drag handles. The curve is a graph of how much of the transition has occurred over the duration. Click and drag the handles to change the curve. As it changes, the decimal values at the top of the page change, too.

On the right side are the built-in timing functions: ease, linear, ease-in, ease-out, and ease-in-out. Click on one, then on the GO! button next to Preview & compare. The icons representing the two timing functions – the custom cubic-bezier and the built-in function – will animate, allowing you to see your custom timing in action and compare it to a built-in option.

Create a custom timing function and, when you are happy with it, copy and paste the values from the website to your code in styles.css:

...
.detail-image-frame {
  position: relative;
  text-align: center;

  transition: transform 333m cubic-bezier(your values here);
}
...

Congratulations! Ottergram is feature-complete! Save your file and admire your finished product. You have taken Ottergram from a simple, static web page to an interactive, responsive page with animated visual effects.

You have come a long way, and hopefully you have enjoyed learning about the basics of front-end development. It is time to wave goodbye to the otters, because you will be starting a new project in the next chapter.