https://w3c.github.io/web-animations/#paced-keyframe-spacing-mode

https://drafts.fxtf.org/filters/#interpolation-of-filters

This is related to the issue: w3c/csswg-drafts/issues/662.

In web-animations (@birtles), we need to calculate the distance between two filter function lists for paced spacing. Unfortunately, we don't have a definition of the distance between two filter function lists in [filter-effects], so I propose a way to calculate (which is very similar to the interpolation):

Compute Distance of <filter-function-list>s

1. If both filters have a <filter-function-list> of same length without <url> and for each <filter-function> for which there is a corresponding item in each list,
   • Compute the square distance of each <filter-function> pair following the rules in section Square Distance of <filter-function>s, and get the square root of the summation.
2. If both filters have a <filter-function-list> of different length without <url> and for each <filter-function> for which there is a corresponding item in each list,
   • Append the missing equivalent <filter-function>s from the longer list to the end of the shorter list.
     The new added <filter-function>s must be initialized to their default values.
   • Compute the square distance of each <filter-function> pair following the rules in section Square Distance of <filter-function>s, and get the square root of the summation.
3. If one filter is none and the other is a <filter-function-list> without <url>
   • Replace none with the corresponding of the other filter.
     The new <filter-function>s must be initialized to their default values.
   • Compute the square distance of each <filter-function> pair following the rules in section Square Distance of <filter-function>s, and get the square root of their summation.
4. Otherwise
   • Cannot compute the distance, so return 0.0.

Square Distance of <filter-function>s

• <blur()>
  • Get the absolute difference and then square it.
• <brightness()>
• <contrast()>
• <grayscale()>
• <invert()>
• <opacity()>
• <saturate()>
• <sepia()>
  • Convert percentage values to numbers with 0% being relative to 0 and 100% relative to 1. Get the absolute difference and then square it
• <hue-rotate()>
  • Get the absolute difference (unit: Radian), and the square it.
• <drop-shadow()>
  • Compute the distance as <shadow list>s. (Note: we only support one shadow item).
    • Compute the square distances of <x-offset>, <y-offset>, and <blur radius>.
    • Compute the square distance of <color>
    • Sum the above square distances.

Example

from { filter: 'grayscale(50%) opacity(100%) blur(5px) drop-shadow(10px 10px 1px blue)' }
to { filter: 'grayscale(75%) opacity(50%)' }

• The square distance of grayscale: (0.75 - 0.5)^2
• The square distance of opacity: (1 - 0.5)^2
• The square distance of blur: (5 - 0)^2
• The square distance of drop-shadow: 10^2 + 10^2 + 1^2 + (1^2 + 1^2)
  Note: blue is (0, 0, 100%, 100%), transparent is (0%, 0%, 0%, 0%)
• The distance is sqrt(the summation of the above square distances)