list them out as separate properties:
// Correct
$element.velocity({
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 10
});
Other common CSS properties that can take multiple numeric values include margin,
transform, text-shadow, and box-shadow.
Breaking up compound properties into their sub-properties for the purposes of
animation gives you increased control over easing values. In CSS, you can specify only
one property-wide easing type when animating multiple sub-properties within the parent
padding property, for example. In JavaScript, you can specify independent easing values
for each sub-property—the advantages of this will become apparent during the discussion
of CSS transform property animation later in this chapter.
Listing out independent sub-properties can also make your animation code easier to
read and easier to maintain.
The second difference between CSS-based and JavaScript-based property animation is
that JavaScript properties drop the dashes between words and all words past the first must
be capitalized. For example, padding-left becomes paddingLeft, and
background-color becomes backgroundColor. Further note that JavaScript
property names should not be in quotes:
Click here to view code image
// Correct
$element.velocity({ paddingLeft: 10 });
// Incorrect: Uses a dash and doesn’t capitalize
$element.velocity({ padding-left: 10 });
// Incorrect: Uses quotes around the JavaScript-formatted property name
$element.velocity({ “paddingLeft”: 10 });
Values
Velocity supports the px, em, rem, %, deg, vw, and vh units. If you don’t provide a unit
type with a numeric value, an appropriate one is automatically assigned based on the CSS
property type. For most properties, px is the default unit, but a property that expects a
rotation angle, such as rotateZ for example, would be automatically assigned the deg
(degree) unit:
Click here to view code image
$element.velocity({
top: 50, // Defaults to the px unit type
left: “50%”, // We manually specify the % unit type
rotateZ: 25 // Defaults to the deg unit type
});
Explicitly declaring unit types for all property values increases your code’s legibility by
making the contrast between the px unit and its alternatives more obvious when quickly