- Target Element ID: the ID of the element whose CSS properties are to be altered.
- Style Property: the name of the CSS property to alter.
- Prefix: Any portion of the CSS value that comes before the calculated numeric portion. For example, if the desired value is "rotate(180deg)", the prefix would be "rotate(".
- Suffix: Any portion of the CSS value that comes after the calculated numeric portion. For example, if the desired value is "rotate(180deg)", the suffix would be "deg)".
- Rounding: If a non-negative number is entered, the calculated value will be rounded to that many decimal places. For no rounding, enter -1.
- Stops: A JSON-encoded array of arrays of numbers that control the interpolation function (explained below).
- Maximum Times: the maximum number of times that this Action will execute before it ignores all future events. The counter resets when the page is reloaded. If set to a negative value, it will execute an unlimited number of times.
The Stops option contains a JSON-encoded array of arrays of numbers. That may sound complicated, but it's fairly straightforward, once you get the hang of it. A simple example would be:
A slightly more complex example, which will be referred to below, is:
- The outermost [square brackets] make the entire value into an array.
- Inside that array are a number of other arrays in square brackets, separated by commas.
- Inside each array are 2, 3 or 4 numbers, separated by commas.
- Spaces are optional.
- Either whole number or decimal values are allowed for all of the numbers.
- Each of the arrays of numbers defines a "stop". A minimum of two stops are required.
- The stops must be arranged in ascending order (the first number of first stop must be the lowest, and so on up.)
- If only two numbers are specified in a stop, a simple straight line calculation is used, as in the example in the previous bullet point.
- For the easing numbers, a value of 1, or an empty string ("" -- which must be specified using double quotes -- be sure not to use "smart quotes") is the same as not specifying a number -- ie. a straight line interpolation.
- A number greater than 1 will ease into the transition more gradually -- the higher the number, the more gradual the initial transition.
- A number between 0 and 1 will ease into the transition more quickly at first -- the lower the number, the more quickly.