| var timingFunctionTests = { |
| tests: { |
| translateSteps: { |
| keyframes: [ |
| {transform: 'translateX(100px)'}, |
| {transform: 'translateX(500px)'} |
| ], |
| easing: 'steps(9)', |
| style: 'background: maroon; float: none;', |
| samples: [ |
| {at: 0}, |
| {at: 0.25}, |
| {at: 0.5}, |
| {at: 0.75}, |
| {at: 1.1}, |
| ] |
| }, |
| |
| translateStepsPerKeyframe: { |
| keyframes: [ |
| {transform: 'translateX(100px)', easing: 'steps(18)'}, |
| {transform: 'translateX(400px)', easing: 'steps(9)'}, |
| {transform: 'translateX(500px)'} |
| ], |
| style: 'background: navy; float: none;', |
| samples: [ |
| {at: 0}, |
| {at: 0.25}, |
| {at: 0.35}, |
| {at: 0.5}, |
| {at: 0.65}, |
| {at: 0.75}, |
| {at: 1.1}, |
| ] |
| }, |
| |
| translateStepsWithCubicBezier: { |
| keyframes: [ |
| {transform: 'translateX(100px)', easing: 'steps(9)'}, |
| {transform: 'translateX(500px)'} |
| ], |
| easing: 'cubic-bezier(.5, -1, .5, 2)', |
| style: 'background: black; float: none;', |
| samples: [ |
| {at: 0}, |
| {at: 0.4}, |
| {at: 0.45}, |
| {at: 0.5}, |
| {at: 0.6}, |
| {at: 1.41}, |
| ] |
| }, |
| |
| translateCubicBezierWithSteps: { |
| keyframes: [ |
| {transform: 'translateX(100px)', easing: 'cubic-bezier(.5, -1, .5, 2)'}, |
| {transform: 'translateX(500px)'} |
| ], |
| easing: 'steps(9)', |
| style: 'background: peru; float: none;', |
| samples: [ |
| {at: 0}, |
| {at: 0.25}, |
| {at: 0.35}, |
| {at: 0.5}, |
| {at: 0.65}, |
| {at: 0.75}, |
| {at: 1.39}, |
| ] |
| }, |
| } |
| }; |