Css Effectspowered by mootools

Introduction

With the introduction of CSS we could seperate the presentation layer and the content layer, but we were not able to add animations via CSS. DHTML fixed this misbehavior, but now the presentation and behaviour layer were mixed.

Defining effects in CSS degrades without any issues. If JavaScript is not available, simply no animations will be displayed, but all styles and rules.

Values are calculated as described in the CSS cascade. Rules with a dynamic pseudo-class are used when "entered", but not when "left".

Read more about this, Digg it! or find it del.icio.us.

Specification

-mootools-property: Either one property or a comma seperated list of properties which should be animated. A value of all animates every css-property, none to disable any animation. The initial value is all.

-mootools-duration: The duration of the effect in milliseconds. The value can also be short (250ms), normal (500ms) or long (750ms). This property defaults to 0ms.

-mootools-transition: Which equation should be used for the effect. The available values depend on what framework you're using.

-mootools: A shorthand for the above three properties.

None of these properties are inherited. For more details feel free to view the specification.

Browser Support

This script works in Safari 3, Firefox 2 and mostly Internet Explorer 7. The script degrades in Internet Explorer 6, because no dynamic pseudo-classes are supported.

Right now I'm working on basic support (:hover and :active) for Internet Explorer 6. You can subscribe to my RSS Feed for further updates.

Examples

ul#layers {
    -moofx: long bounce-out left, top;
}
ul#layers:hover {
    left: 10em;
    top: 5em;
}
a:hover {
    -moofx: font-size 430;
    font-size: 1.3em;
}

You can find more examples at the examples page.

Get it!

You're downloading a beta version. Don't expect that everything is working correctly.

Currently you can use this script only with mootools 1.2b or any compatible version.