Basic Properties Map

- NOTE: This documentation is for Velocity v2.

Basics: Properties Map

Properties

Velocity auto-prefixes properties (e.g. transform becomes webkit-transform on WebKit browsers); do not prefix properties yourself.

Velocity animates any numeric values found. Hence, you can pass in:

{ padding: "10px" }

or

{ padding: "10px 5px 20px 5px" }

Values

Velocity passes any units on unchanged where possible, however if you are changing units (with or without [forcefeeding](Advaned - Forcefeeding.md)) then it will automatically wrap it in a calc(Apx + B%) style, with the left half animating to zero, and the right half animating from zero. Some properties automatically support being passed a numeric argument and adding a unit to them (which is always px), although it is always advised to use a String argument to be absolutely clear what you mean.

Velocity also allows for some very simple "from here" type maths by prefixing the number with a +=, -=, *= or /=. While this can change values slightly, it is also quite delicate so should only be used with known simple values and only when keeping the same units.

$element.velocity({
    top: 50, // Defaults to the px unit type
    left: "50%",
    height: "*=2" // Double the current height
});