animation-shorthand.html (2083B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Animations: animation sets longhands</title> 6 <link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation"> 7 <meta name="assert" content="animation supports the full grammar '<single-animation> #'."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/shorthand-testcommon.js"></script> 11 </head> 12 <body> 13 <script> 14 test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)', { 15 'animation-duration': '1s', 16 'animation-timing-function': 'cubic-bezier(0, -2, 1, 3)', 17 'animation-delay': '-3s', 18 'animation-iteration-count': '4', 19 'animation-direction': 'reverse', 20 'animation-fill-mode': 'both', 21 'animation-play-state': 'paused', 22 'animation-name': 'anim', 23 'animation-timeline': 'auto', 24 'animation-range-start': 'normal', 25 'animation-range-end': 'normal', 26 }); 27 28 test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)', { 29 'animation-duration': 'auto, 1s', 30 'animation-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)', 31 'animation-delay': '0s, -3s', 32 'animation-iteration-count': '1, 4', 33 'animation-direction': 'reverse, normal', 34 'animation-fill-mode': 'both, none', 35 'animation-play-state': 'paused, running', 36 'animation-name': 'anim, none', 37 'animation-timeline': 'auto', 38 'animation-range-start': 'normal', 39 'animation-range-end': 'normal', 40 }); 41 42 test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse', { 43 'animation-duration': '1s, auto', 44 'animation-timing-function': 'cubic-bezier(0, -2, 1, 3), ease', 45 'animation-delay': '-3s, 0s', 46 'animation-iteration-count': '4, 1', 47 'animation-direction': 'normal, reverse', 48 'animation-fill-mode': 'none, both', 49 'animation-play-state': 'running, paused', 50 'animation-name': 'none, anim', 51 'animation-timeline': 'auto', 52 'animation-range-start': 'normal', 53 'animation-range-end': 'normal', 54 }); 55 </script> 56 </body> 57 </html>