keyframe-multiple-timing-functions-transform.html

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #box {
            position: relative;
            height: 100px;
            width: 100px;
            margin: 20px;
            background-color: red;
            transform: translateZ(0);
            animation:
                horizontal 2s linear 1 alternate,
                fade 2s steps(1, end) 1 alternate;
        }

        @keyframes horizontal {
            from { transform: translateX(0px); }
            to   { transform: translateX(200px); }
        }

        @keyframes fade {
            from { opacity: 1.0; }
            to { opacity: 0.0; }
        }
    </style>
    <script src="../resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        const expectedValues = [
          // [time, element-id, property, expected-value, tolerance]
          [0.5, "box", "transform", [1,0,0,1, 50,0], 20],
          [1.0, "box", "transform", [1,0,0,1,100,0], 20],
          [1.5, "box", "transform", [1,0,0,1,150,0], 20],
          [0.5, "box", "opacity", 1.0, 0.15],
          [0.9, "box", "opacity", 1.0, 0.15],
          [1.5, "box", "opacity", 1.0, 0.15],
        ];

        runAnimationTest(expectedValues);
    </script>
</head>
<body>
    <div id="box"></div>
    <div id="result"></div>
</body>
</html>

chromium/third_party/blink/web_tests/animations/timing/keyframe-multiple-timing-functions-transform.html