pui.animate( config )

This function animates an element or a container using a CSS3 transition.

Parameters:

• config object - JavaScript object containing configuration properties for this animation

Configuration Options:

• element - the id or reference to an element or container object to animate

• effect - a specific animation effect to use; if this config option is used, the config options "property", "from", and "to" are automatically set and do not need to be specified; the following effect values are valid:

  • fade in

  • fade out

  • fly in left

  • fly out left

  • fly in right

  • fly out right

  • fly in down

  • fly out down

  • fly in up

  • fly out up

• property or properties - the CSS property to animate, such as color, left, top, or background-color; can also be specified as an array of properties

• duration - optional value specifying how long the animation will last; can be specified in seconds (example: "1s") or milliseconds (example: "750ms"); if not specified, the default duration of 500ms or 0.5s is used

• type - optional animation type; valid values include linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier(n,n,n,n); if not specified, the default animation type is "ease"

• from - optional beginning property value for the animation; can be specified as an array if dealing with multiple properties; if not specified, the current property value is used as the beginning value

• to - destination property value for the animation; can be specified as an array if dealing with multiple properties

Example:

The following can be used on the onload event to create a screen transition animation from left to right:

Alternatively, the following simpler syntax can also be used: