CSS Transformations, Animations, And Transitions Examples

Apple CSS Specifications

As mentioned within Apple's documentation the specifications they have written have not yet been approved however the webkit CSS specifications are supported in Safari and the Apple iPhone/Ipod Touch Safari browser. Personally I think this is a phenominal step towards abstracting design and functionality.

Imagine your client wants the server to render 80x80 pixel grayscale thumbnails for every image on your site, this takes a lot of processing power, and if the client decides they want full color images then now we would have to issue a batch process to re-render ALL of the images. With CSS this could now be done simply using transforms. This specification would truly bring an entire new toolset to designers, and take some weight off of JavaScript developers.

To view CSS transitions, animations and transformations properly you must view this page in the Safari web browser.

CSS Transformation Examples

Transformations or 'transforms' allow you to translate, scale and rotate an element on the x, y, and z axis.

Original

Sample Translation

#example-1 {
  -webkit-transform: translate(150px, 0);
}

Sample Rotation And Translation

#example-2 {
  -webkit-transform: translate(100px, 0) rotate(45deg);
}

Sample Scale, Rotation, And Translation.

#example-3 {
  -webkit-transform: translate(80px, 0) rotate(-65deg) scale(1.5);
}

CSS Transition Examples

Transitions allow you to perform smooth transitions between CSS property changes, including colors, positions, dimensions and more. Hover over the images below to begin transition examples.

Sample Transition

#example-4 {
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
}
#example-4:hover {
  opacity: 0.1;
}

More Properties And Timing Function

#example-5 {
  -webkit-transition-property: margin-left, border-color, width, height;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  border: 2px solid #000;
}
#example-5:hover {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  border-color: #0000ff;
}

CSS Animation And Misc Examples

CSS Animations utilize keyframes in order to vary the animation throughout its duration.
I was not able to get the keyframes to work however this is the syntax specified in the specification.

Simple Animation

#example-6:hover {
  -webkit-animation: 'wobble' 2s;
}
@keyframes 'wobble' {
  0 {
    margin-left: 0;
  }
  40% {
    margin-left: 15px;
  }
  60% {
    margin-left: 75px;
  }
  100% {
    margin-left: 100px;
  }
}

Additional Information

Read about the Apple CSS Specifications for specific details.

Bookmark/Search this post with:

Comments

Mar 2 2010 - 8:58am - pneumatyka

in alphas and betas. Today they released Opera 10.5 final with full support, so I guess article needs to be updated :)
Opera now supports both transitions and transforms :)

Aug 2 2009 - 3:48am - marcus

This feature is still pre-spec, so everything must be in the "-webkit" namespace; "@keyframes" should be "@-webkit-keyframes". Also, the keyframe labeled "0" needs to be "0%", to fall in line with the standard. So it should look something like this:

#example-6:hover {
  -webkit-animation: 'wobble' 2s;
}
@-webkit-keyframes 'wobble' {
  0% {
    margin-left: 0;
  }
  40% {
    margin-left: 30px;
  }
  60% {
    margin-left: -30px;
  }
  100% {
    margin-left: 0;
  }
}

Mar 5 2009 - 3:25am - Thendenze

Really very interesting.
Good work!!!

Aug 22 2008 - 8:07pm - admin

Cool looks neat good job!

Aug 22 2008 - 5:19am - webmatze

Thank you for the examples.
I build a simple image gallery using those new features:
http://webmatze.de/css-3-rotating-image-gallery/

Hope to see support in other browsers too.

Aug 18 2008 - 4:49pm - Delos

Excelente Pagina Web; me guts mucho.