[web-animations] support blending of mismatched filter lists

https://bugs.webkit.org/show_bug.cgi?id=248270

Reviewed by Simon Fraser.

We would fail to blend when filter lists mismatch and instead always fall back to the "to" value.

Instead of the matching filter functions on KeyframeEffect, we implement the specification for when
blending is supported in PropertyWrapperFilter::canInterpolate() such that we correctly identify
more discrete cases.

* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-002-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-003-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation-expected.txt:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::blendFunc):
* Source/WebCore/animation/CSSPropertyBlendingClient.h:
* Source/WebCore/animation/KeyframeEffect.cpp:
(WebCore::KeyframeEffect::setBlendingKeyframes):
(WebCore::KeyframeEffect::checkForMatchingFilterFunctionLists const): Deleted.
(WebCore::KeyframeEffect::checkForMatchingFilterFunctionLists): Deleted.
(WebCore::KeyframeEffect::checkForMatchingBackdropFilterFunctionLists): Deleted.
(WebCore::KeyframeEffect::checkForMatchingColorFilterFunctionLists): Deleted.
* Source/WebCore/animation/KeyframeEffect.h:

Canonical link: https://commits.webkit.org/256975@main

LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-002-expected.txt

@@ -23,30 +23,30 @@ PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(1
 PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(180deg)] at (0.5) should be [opacity(0.75) hue-rotate(90deg)]
 PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(180deg)] at (1) should be [opacity(0.5) hue-rotate(180deg)]
 PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(180deg)] at (1.5) should be [opacity(0.25) hue-rotate(270deg)]
-FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
+PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
+PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
+PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
+PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
 PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
-FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
+PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
+PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
+PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
+PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
+PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
 PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
-FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
+PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
+PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
+PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
+PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
+PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
 PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
-FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
-FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
+PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
+PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
+PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
+PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
+PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
 PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
-FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
+PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
 PASS CSS Transitions: property <filter> from [none] to [hue-rotate(180deg)] at (-0.5) should be [hue-rotate(-90deg)]
 PASS CSS Transitions: property <filter> from [none] to [hue-rotate(180deg)] at (0) should be [hue-rotate(0deg)]
 PASS CSS Transitions: property <filter> from [none] to [hue-rotate(180deg)] at (0.25) should be [hue-rotate(45deg)]
@@ -133,16 +133,16 @@ PASS CSS Transitions with transition: all: property <filter> from [grayscale(0)
 PASS CSS Transitions with transition: all: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.6) should be [blur(10px)]
 PASS CSS Transitions with transition: all: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1) should be [blur(10px)]
 PASS CSS Transitions with transition: all: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1.5) should be [blur(10px)]
-FAIL CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
-FAIL CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
-FAIL CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
+PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)]
+PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)]
+PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)]
 PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.5) should be [blur(10px)]
 PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.6) should be [blur(10px)]
 PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1) should be [blur(10px)]
 PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1.5) should be [blur(10px)]
-FAIL Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
-FAIL Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
-FAIL Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
+PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)]
+PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)]
+PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)]
 PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.5) should be [blur(10px)]
 PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.6) should be [blur(10px)]
 PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1) should be [blur(10px)]

LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-003-expected.txt

@@ -241,16 +241,16 @@ PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilt
 PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.6) should be [blur(5px)]
 PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1) should be [blur(5px)]
 PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1.5) should be [blur(5px)]
-FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
-FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
-FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
+PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")]
+PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")]
+PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")]
 PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.5) should be [blur(5px)]
 PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.6) should be [blur(5px)]
 PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1) should be [blur(5px)]
 PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1.5) should be [blur(5px)]
-FAIL Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
-FAIL Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
-FAIL Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
+PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")]
+PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")]
+PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")]
 PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.5) should be [blur(5px)]
 PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.6) should be [blur(5px)]
 PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1) should be [blur(5px)]

LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-001-expected.txt

@@ -244,9 +244,9 @@ FAIL filter: hue-rotate function with different unit(deg -> rad) assert_equals:
 PASS filter: drop-shadow function
 PASS filter: percentage or numeric-specifiable functions (number value)
 PASS filter: percentage or numeric-specifiable functions (percentage value)
-FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 1 assert_equals: The value should be grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5) at 500ms expected "grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5)" but got "grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)"
-FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 0 assert_equals: The value should be opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px) at 500ms expected "opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)" but got "opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)"
-FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px) at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"
+PASS filter: interpolate different length of filter-function-list with function which lacuna value is 1
+PASS filter: interpolate different length of filter-function-list with function which lacuna value is 0
+PASS filter: interpolate different length of filter-function-list with drop-shadow function
 PASS filter: interpolate from none
 PASS filter: url function (interpoalte as discrete)
 PASS flex-basis (type: lengthPercentageOrCalc) has testInterpolation function

LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation-expected.txt

@@ -15,8 +15,8 @@ PASS iteration composition of filter brightness for different unit animation
 PASS iteration composition of filter brightness animation
 PASS iteration composition of filter drop-shadow animation
 PASS iteration composition of same filter list animation
-FAIL iteration composition of discrete filter list because of mismatch of the order assert_equals: Animated filter list at 0s of the third iteration expected "brightness(1) contrast(1)" but got "contrast(2) brightness(2)"
-FAIL iteration composition of different length filter list animation assert_equals: Animated filter list at 50s of the first iteration expected "sepia(0.5) contrast(1.5)" but got "sepia(1) contrast(2)"
+PASS iteration composition of discrete filter list because of mismatch of the order
+FAIL iteration composition of different length filter list animation assert_equals: Animated filter list at 0s of the third iteration expected "sepia(1) contrast(3)" but got "sepia(1) contrast(4)"
 PASS iteration composition of transform(rotate) animation
 PASS iteration composition of transform: [ scale(0), scale(1) ] animation
 PASS iteration composition of transform: [ scale(1), scale(2) ] animation