Webkit CSS Transitions and Transformations

This blog is best viewed in Safari or Chrome since it uses Webkit-specific functionality.

Transitions

transition, the process or a period of changing from one state or condition to another

Transitions are usually performed using jQuery or some other Javascript framework to animate the changes to a property. When using Webkit (Safari, Chrome, iPad, iPhone) Javascript is not necessary anymore.

In Webkit the transitions are described using four different properties. It is worth noting that the properties only define how the transitions will work when the values on the element is changed. They don't actually do anything until the values are changed!

/* This sets up a transition property on all divs on opacity.*/
div {
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 2s;
}
/* The fade-in class, changes the opacity when set on an element.
  And thus triggers the transition defined above if the element is a div. */
.fade-in {
  opacity: 1;
}

// Adds the class 'fade-in' on all divs, via jQuery.
$("div").each(function() {
  $(this).addClass('fade-in');
});

-webkit-transition-property

This is the property that will be affected by the transition, this can be any valid property, and it defaults to all. What this means is that a change to any attribute on an element will be affected by the transition and occur according to the specification.

/* only width should be affected */
-webkit-transition-property: width;

/* multiple comma-separated properties are supported */
-webkit-transition-property: opacity, width, height;

/* all properties should be affected, this is the default */
-webkit-transition-property: all;

-webkit-transition-duration

How long the transition should take? Valid units are s and ms.

/* Set the duration to 400 milliseconds */
-webkit-transition-duration: 400ms;

/* Multiple values are supported here too, in combination with
multiple -webkit-transition-property's */
-webkit-transition-property: opacity, width, height;
-webkit-transition-duration: 400ms, 1s, 3s;

-webkit-transition-delay

How long should we wait before the transition starts. Valid units are s and ms.

/* Set the delay to 1 second */
-webkit-transition-delay: 1s;

/* Multiple values are supported here too, in combination with
multiple -webkit-transition-property's */
-webkit-transition-property: width, height;
-webkit-transition-delay: 1s, 3s;

-webkit-transition-timing-function

The timing function is a function that changes the speed of the transition over its duration. It is described with a cubic-bezier curve, but it has some predefined values, ease (default), ease-in, ease-out, ease-in-out, and linear. In none of those values are to your liking you can define your own with the cubic-bezier function.

/* Transition with the default timing*/
-webkit-transition-timing-function: ease;
/* Multiple values are supported here too, in combination with
multiple -webkit-transition-property's */
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-timing-function: ease-out, cubic-bezier(0.5, 0.2, 0.3, 1.0);

Thats it for transitions. But wait, what was that -webkit-transform in the end?

Transformations

transformation, a thorough or dramatic change in form or appearance

Webkit supports some really cool transformations, that allow you to animate the pages in remarkable ways.

rotate()

<div style = "width: 12em;
  margin-top: 5em;
  -webkit-transform: rotate(45deg)">
I am rotated!
</div>

I am rotated!

Rotate accepts the units deg, rad, and grad

It also comes in 3D forms, rotateX, rotateY, rotateZ, and rotate3d.

scale()

<div style = "width: 12em;
  margin: 2em 0 2em 18em;
  -webkit-transform: scale(4)">
I am Scaled!
</div>

I am Scaled!

Scale can take an additional parameter scale(x, y) If you want to scale un-proportionally. It also comes in 3D versions, scaleX, scaleY, scaleZ, and scale3d.

translate()

<div style = "width: 12em;
  margin: 2em;
  -webkit-transform: translate(4em, -2em)">
I am Translated!
</div>

I am Translated!

Translate takes one or two parameters and moves the element to the new location. It, too, comes in 3D forms, translateX, translateY, translateZ, and translate3d.

Additional Transforms

Apart from the translations above, Webkit also supports skew, perspective, and matrix. Read more in the Safari Reference Library

I'll finish up with a composite transform combined with transitions, best viewed with Safari. This transformations are initiated by changing the style from Javascript.

<div style="width: 4em; height: 4em;
  margin: 2em; background-color: blue;
  color: white;
  -webkit-transition-duration: 5s;
  -webkit-transition-function: ease-out;"
  onclick='style.webkitTransform="translate(16em, -16em) scale(6) rotate(720deg)"; style.backgroundColor="red";'> Click Me!
</div>

Click Me!