[edit] Overview

Wikipedia

[edit] Support for Technologies

[edit] CSS

[edit] experimental CSS

This section details experimental features of CSS (some in CSS3, others proposed by Apple as additions to CSS) which are implemented in Safari 3 for Mac OS X. These features are all properties, which use the experimental feature syntax of prepending -webkit- to the property name.

[edit] Transitions

Transitions are an experimental CSS feature which specifies a CSS property or properties to be animated, the time these animations should take place over, and a "timing function" for the animation which specifies how the animation should proceed over time.

Transitions are specified by three properties

[edit] Examples

From the webkit site comes this example 

div {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}

div:hover {
  opacity: 0;
}

Which says in essence, the opacity of div elements should be 1, and when an opacity transition occurs (that is when opacity for a div changes) then animate that transition for 1 second, using a linear time function.

Here's what this will look like - mouse over the div below to see it in action.

This div will fade out when hovered over. In browsers that do not support this animation, there will be graceful degradation, as the div will simply fade out immediately.

At present this doesn't work because I can't work out how to make MediaWiki (the wiki software for this site) stop stripping out the mouseover and mouseout events that trigger the example. Please edit it if you know how! The joy of Wikis (then you can edit out this comment too.)

Some more examples and further descriptions can be found at

[edit] More Reading

For more on timing functions - his is a great overview of how timing functions working.

[edit] Transforms

Webkit's experimental, and proposed standard transforms apply one or more transformations to an element - for example scaling or rotating it.

Transforms are as of June 1008 a very experimental aspect of CSS support in Safari only. The webkit documentation above is largely unsupported in Safari 3 Mac (3.1.1), and only a little more supported in Webkit nightlies. With WWDC 2008 only a few days away, this might change significantly in the near term. To help with browser testing, see this simple set of tests for the currently supported properties.

Transforms are applied using the transform property (with one exception, perspective, which may be applied either using the perspective property or a transform function). There are a number of auxiliary properties which affect transforms.

CSS Transforms conceptually closely mirror SVG Transforms.

[edit] transform (-webkit-transform)

the transform property takes as its value a transform function or coma separated list of transform functions. These functions are

These functions can be applied individually or cumulatively.

[edit] transform-origin

By default, the origin of the transform is the midpoint of the element in the 2 dimensional plane. for example, when an element is rotated, it is rotated about it's midpoint. The transform origin property specifies the place where the transform takes place from. For example, an origin of 0,0,0 would rotate an element about its top left corner, rather than its midpoint.


[edit] transform style
[edit] perspective
[edit] perspective-origin
[edit] backspace visibility

[edit] HTML

[edit] HTML5

[edit] JavaScript

[edit] DOM

[edit] SVG

[edit] Image formats

Retrieved from "http://westciv.com/wiki/Safari_3_%28Mac%29"