All About Cubic Bezier Curves & Transitions

3

Cubic Bezier Curves in CSS3

In the last post, we looked at the basics of CSS transitions, including how to use easing to control how your animation flows. In this post, I want to look deeper at a very powerful easing feature; cubic bezier curves.

In short, they let you define exactly what path your animation will take, and thanks to some awesome community tools, they are extremely easy to use (No maths required at all). This gives you total flexibility with your transitions.

One of the best tools is the free Cubic-Bezier.com by Lea Verou. It lets you make new curves and see them in action just by dragging the handles. We’ll use it for all of the demos in this post, and it’s well worth a bookmark!

Read More »

Get Started With CSS3 Transitions Today

2

CSS3 Transitions

Transitions (basic animations) are one of the most popular additions in CSS3, and one of the easiest to implement for big gains on your site.

A transition is simply an animation from one set of CSS properties to another. So for example; whilst before you may have had links with blue text, which suddenly turned orange when you hovered on them, you would now replace that sudden jump with a more graceful animation.

In this post, we’ll look at the basic syntax, step through some examples, and finally take a brief look at current browser support.

Read More »

Let Readers Read In Peace

30

Continuity of a path. The first step to increasing readership with design is to draw attention to the article. The second, equally important step, is to keep attention on the article.

Continuity is the idea that when the eye is following a line, it will continue to follow that line until something else draws its attention away, or breaks the line.

We can apply this principle to a blog post as well. When a user begins reading, we want them to continue following the article down. There should be nothing to steal their attention from the column of text.

Ensuring that their focus on the article is not interrupted allows them to more fully, and easily, immerse themselves in the words. In return, you may gain a new subscriber or comment.

Read More »