OLD | NEW |
(Empty) | |
| 1 var timingFunctionTests = { |
| 2 tests: { |
| 3 translateSteps: { |
| 4 keyframes: [ |
| 5 {transform: 'translateX(100px)'}, |
| 6 {transform: 'translateX(500px)'} |
| 7 ], |
| 8 easing: 'steps(9)', |
| 9 style: 'background: maroon; float: none;', |
| 10 samples: [ |
| 11 {at: 0}, |
| 12 {at: 0.25}, |
| 13 {at: 0.5}, |
| 14 {at: 0.75}, |
| 15 {at: 1.1}, |
| 16 ] |
| 17 }, |
| 18 |
| 19 translateStepsPerKeyframe: { |
| 20 keyframes: [ |
| 21 {transform: 'translateX(100px)', easing: 'steps(18)'}, |
| 22 {transform: 'translateX(400px)', easing: 'steps(9)'}, |
| 23 {transform: 'translateX(500px)'} |
| 24 ], |
| 25 style: 'background: navy; float: none;', |
| 26 samples: [ |
| 27 {at: 0}, |
| 28 {at: 0.25}, |
| 29 {at: 0.35}, |
| 30 {at: 0.5}, |
| 31 {at: 0.65}, |
| 32 {at: 0.75}, |
| 33 {at: 1.1}, |
| 34 ] |
| 35 }, |
| 36 |
| 37 translateStepsWithCubicBezier: { |
| 38 keyframes: [ |
| 39 {transform: 'translateX(100px)', easing: 'steps(9)'}, |
| 40 {transform: 'translateX(500px)'} |
| 41 ], |
| 42 easing: 'cubic-bezier(.5, -1, .5, 2)', |
| 43 style: 'background: black; float: none;', |
| 44 samples: [ |
| 45 {at: 0}, |
| 46 {at: 0.4}, |
| 47 {at: 0.45}, |
| 48 {at: 0.5}, |
| 49 {at: 0.6}, |
| 50 {at: 1.41}, |
| 51 ] |
| 52 }, |
| 53 |
| 54 translateCubicBezierWithSteps: { |
| 55 keyframes: [ |
| 56 {transform: 'translateX(100px)', easing: 'cubic-bezier(.5, -1, .5, 2)'}, |
| 57 {transform: 'translateX(500px)'} |
| 58 ], |
| 59 easing: 'steps(9)', |
| 60 style: 'background: peru; float: none;', |
| 61 samples: [ |
| 62 {at: 0}, |
| 63 {at: 0.25}, |
| 64 {at: 0.35}, |
| 65 {at: 0.5}, |
| 66 {at: 0.65}, |
| 67 {at: 0.75}, |
| 68 {at: 1.39}, |
| 69 ] |
| 70 }, |
| 71 } |
| 72 }; |
OLD | NEW |