CSS Animations first made their appearance in Surfing Safari, the blog devoted to Apple’s Webkit browser. I had to have the most recent nightly build to see the animation, and was, of course, amazed to see leaves fall or basic shape animation (these demos only work in Webkit browsers).

That was two years ago. Since then the standards compliant browsers have picked this up and it has since been submitted as a standard.

Since the release, the transformations have been offloaded to the computer’s graphic chip, meaning that they are smoother and faster than CPU driven animation using Javascript.

Transition Between Pseudo Classes

Transitions describe how CSS properties can be made to change smoothly from one value to another over a given duration. By default, this duration for pseudo classes is instantaneous, as demonstrated by the change when hovering over this element. The change in appearance is the difference between the element’s description and the pseudo class :hover. It goes from background: purple; to background: blue; as soon as the mouse hovers over the element.

Instead of making this change instantaneously, a transition gives this change a duration. You can see that the transition property is specified as a change in the background color, with a duration of 4 seconds. The before and after states are determined by the differences in the element’s description and the description of its hover state.

When you hover over the div, the transition from purple to blue takes 4 seconds.

A good use for this transition effect is to animate the opacity between two pictures.

Adjusting the Rate of Change

The transition velocity can be controlled. In addition to the default transition timing function, there are a number of other timing functions based on 5 predefined cubic bézier curves that control the rate of change during the transition function. Each box below has the same transformation but as you roll over the example, it demonstrates the different transition timing functions, as labeled.

You can create the rate of change curve yourself by specifying the x and y coordinates of the two bézier control handles associated with the starting and end points. In the last example, it is transition-timing-function: cubic-bezier(0,1,1,0);. An ease-in curve would be defined as cubic-bezier(0.42, 0, 1, 1); and an ease-out curve would be defined as cubic-bezier(0, 0, 0.58, 1), the first brings the curve down while the second pushes it over the linear progression of (0, 0, 1, 1). You can try this yourself by changing the numbers below and hovering over the demo above:

This injects a bit of AfterEffects into web presentations, though it is much more limited in scope. There is much more promise of that with CSS3 animations.

What Attributes can be changed?

The W3 has the following list of properties that can be changed in a transition.

Some of them are:

• background-color, image and position
• border-color, width, length, spacing
• color
• crop
• height
• left
• letter-spacing
• line-height
• margin
• max-height
• max-width
• min-height
• min-width
• opacity
• outline-color, offset, width
• padding
• right
• text-indent, shadow
• top
• vertical-align
• visibility
• width
• word-spacing
  integer
• zoom

Visual Formatting Model

The web browser lays out the page according to a coordinate system that, by default, is expressed in pixels and has the X and Y Zero point in the upper left hand corner of the parent object, like InDesign. Illustrator places it on the lower right hand corner, the way you learned it in geometry.

2D Transform

The transform property modifies this coordinate space, so that elements can be translated, rotated and scaled in this two dimensional space. When you create a value for the transform property, a new local coordinate system is established by which the position of the element is calculated. The 2D transforms add up, meaning that if you rotate the parent element, and then rotate the child element, the child will be rotated in addition to the parent’s rotation. The coordinate system then calculates the cumulative transformation matrix (CTM) for the element.

You can apply two different transforms to the X and Y axis with the transform property values transform: <transform-function for X> <transform-function for Y>; where the 2D transform functions are listed in length or percentages and angles in degrees, grads, radians or turns (according to the CSS3 values and units):

• matrix(number, number, number, number, number, number)
  Matrix specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].
• translate(value for x, value for y)
  translate specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
• translateX(value)
  Translate X specifies a translation by the given amount in the X direction.
• translateY(value)
  Translate Yspecifies a translation by the given amount in the Y direction.
• scale(value for x, value for y)
  Scale specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
• scaleX(value)
  Scale X specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
• scaleY(value)
  Scale Y specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
• rotate(angle)
  Rotate specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.
• skewX(angle)
  Skew X specifies a skew transformation along the X axis by the given angle.
• skewY(angle)
  Skew Y specifies a skew transformation along the Y axis by the given angle.
• skew(angle, angle)
  Skew X and Y specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis).

If your object is small, it is not a problem to establish its position on the default coordinate system, and tweaking its relative position if need be, but for some objects, it is better that you control the point of the transformation, which by default is the midpoint of the object.

You can set the 0,0 point to determine the point of transformation using percentage, length, or keyword like left, center and right for the X axis and top, center and bottom for the Y axis: transform-origin: left top

If only one element is is specified, the second value is assumed to be center.

Transform can be used locally or global. First, it is a local way of turning objects that does not involve the structure of the layout itself. The second way is to transform large parts of the document, and since the children inherit the parent’s transforms, all the children will take on that transformation.

Local Transforms

The content (children) of the transformed element inherit the altered coordinate space, and transform with it, such as this text and image.

global Transforms

Here you will transform the entire content element on this page from the center, with everything on it. Every child element gets transformed with the parent.

Change the values for both the transform origin and the transform scale, rotate, transform and skew. Careful, for you can lose the ability to edit this if you make too radical a change, and will need to refresh the page to reset it. Try rotating the element by 90°, 180° or 360 degrees.

Use Cases

See the Pen
Diagonal Layouts in 2020 by Nils Binder (@enbee81)
on CodePen.

Front End Interfaces

A lot of activity is happening with these tools, and you can expect Illustrator-like drawing programs at the front end that use CSS and HTML as the backend language. Check out this text on a path generator and don’t forget to look at his explanation of Natural Object-Rotation with CSS Transform 3D and pop-up book example.

Transition and Transform Animations

It’s possible to animate the transformations using the psudo class hover. Much like the transition effect applied to the alpha of the overlying picture to make it fade upon hover, using transformations enhance the effect.

Taiyo

Tompkins Square Park

Tutorial, Demo and Download.

3D Transform

Add to the X and Y axis a z axis, and you go from 2D to 3D. There are a number of additional 3D functions addressing the 3D space:

• matrix3d(number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number)
  Matrix 3D specifies a 3D transformation as a 4×4 homogeneous matrix of 16 values in column-major order.
• translate3d(value for x, value for y)
  Translate 3D specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
• translateZ(value)
  Translate Z specifies a 3D translation by the vector [0,0,tz] with the given amount in the Z direction.
• scale3d(value for x, value for y, value for z)
  Scale 3D specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
• scaleZ(value)
  Scale Z specifies a 3D scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
• rotate3d(value for x, value for y, value for z, angle)
  Rotate 3D specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied. Note that the rotation is clockwise as one looks from the end of the vector toward the origin.
  rotateX(angle) is the same as rotate3d(1, 0, 0, angle).
  rotateY(angle) is the same as rotate3d(0, 1, 0, angle).
  rotateZ(angle) is the same as rotate3d(0, 0, 1, angle), which is also the same as rotate(angle).
• perspective(value)
  Perspective specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. For example, a value of 1000px gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The value for depth must be greater than zero, otherwise the function is invalid.

  Change the perspective on the example to 200 and see how extreme it becomes, or 500, which is much more normal. Change the rotation, and see the browser render the element as if it were in 3D space.

The content (children) of the 3D transformed element inherit the altered coordinate space, and transform with it, such as this text and image.

Working in 3D is inherently complex and to do it right requires some calculation and knowledge of 3D. For a better primer check out understanding CSS3D transforms and Natural Object Rotation in 3D by Eleqtiq, who also gave us the CSS3 Text Warping used above. For a 3D matrix transfom tool, check out the Matric Contruction Set by Zoltan. That should get you started.

In the mean time, more browsers are supporting transforms, so it looks like you can use it sooner than later, as long as your design falls back to something presentable on older browsers.

Pong. Remember Pong? I’m sure that most of you only know it as a museum piece. It has been resurrected by Alex Walker as a strictly HTML and CSS3 (no javascript) exercise that works.

See the Pen CSS3 Pong by Alex (@alexmwalker) on CodePen.

Take a look at these 3D animated demonstrations.

Apple’s Webkit team introduced a number of technologies, one of which is CSS Animations, which allow an author to modify CSS property values over time. This is an evolving specification. Expect lots of changes as time goes by.

The good news is that animations are hardware accelerated. The computer’s graphic chip does the heavy lifting, and not the CPU. This speeds animations up from the start.

Here is an example by Anthony Calzadilla:

Involved animations are complicated, and all kinds of tools will be developed to facilitate building more complicated CSS animations. In the mean time, there is a lot you can do and instructions on how to do it by adding class names to your code.

There are several programs targeting the creation of CSS animations, primarily targeting the building of ads without using Flash, including Sencha’s Animator, Adobe’s Edge and Google’s Google Web Designer . Be aware that most of these solutions rely on javascript to help with the CSS3 animations but since the program is writing the code, all you need to deal with is a timeline interface.

@Keyframe

You have seen these @ rules used before, in @media, @font-face and @import. At-rules are instructions or directives to the CSS parser.

What follows are two brackets, and all the code is entered inside. This is referred to as the “code block.”

The @keyframe code block contains the keyframes of the animation. The way to write it is:

@-webkit-keyframes name-for-animation {
  /* RULE SETS */
}

In between the brackets are the rule sets, which always start with the start and stop keyframes: from or 0% and to or 100%. The entire keyframe at rule looks like:

@-webkit-keyframes name-for-animation {
   0% /* from */{
   }
   100% /* to */ {
   }
}

All other reframes come between the start and end, and you can use from and to, or 0% and 100% keyframes. To make it work, however, you also need to include the animation name as a quality of the animation property.

Now to assign the keyframes. In the demo below, the div with and id of “ani-1” contains the animation property shorthand that calls up the keyframe at rule.

Within this property we’re specifying the name of the animation animation-name: name-for-animation, to specify which keyframes to use, the duration, animation-duration: 10s, the timing function: animation-timing-function: linear and the number of times to repeat the keyframes animation-iteration-count: infinite.

There is also a direction property animation-direction: normal, and the possibility to set a delay animation-delay: 0.  

You can change the animation but to get the demo to register the changes, you need to temporarily change the keyframe name in the animation property, and then change it back, and it will recognize any changes you’ve made to the keyframes, otherwise it will continue on its previously determined course. The animation is set up for webkit only.

The animation could have been optimized. I could have used the transform property, rather than top and left, which is suppose to be faster, and use sub pixel rendering to create a more fluid experience.

Animation is in its infancy, and the specification will evolve and change several times before settling down but it’s actively being implemented by all major browsers and here to stay. If you want to peruse CSS animations, check out Lea Veroa’s Animatable for inspiration.

Interactive Stories/Ads

Digital storytelling — Designing this Interactive HTML5 Storybook is explained in detail at the end of the story.

Google recently introduced Google Web Designer and Adobe has The Edge Suite and in particular Edge Animate. These tools produce interactive content for desktop and mobile devices. See the Adobe Edge tools used to showcasethemselves.

Flash used to dominate this domain, which was used primarily for ads but was pushed out after stepping foul of Apple’s QuickTime and the popularity of the iPhone. Who wants to pay for ads that wealthy iPhone owners cannot see?

That left a vacuum that CSS3, HTML5, and Javascript are supposed to fill. CSS, HTML, and Javascript are not Flash, and as you can see, even creating basic animation is challenging.

To solve this, both programs provide a drag-and-drop, easy-to-use user interface for creating animation and interactivity using HTML, CSS, and JavaScript. Adobe wants to recapture the Flash market, and Google wants people to create ads because that is where Google makes its money. Google is an expert at the commercialization of goodwill.

Though we have access to both programs, I like the way Google Designer allows me to switch to code view and edit the parameters directly. Adobe Edge Animate requires Edge Code to look at the underlying code and may be more ambitious in the long run but it is not nearly so interesting and useful for us as Google’s Web Designer.

Google Web Designer

Download a copy and use it to do your animatic or motion enabled ad. Instructions on how to use the program can be found on the original download page.

Google Web Designer help and tutorials

SVG

SVG or scalable vector graphics, are waiting to HTML and can be animated. Illustrator can export .svg file format and those can be imported into this online app Svgartista