<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>CSS Animations Test: animation-iteration-count - negative value</title> <link href="http://www.nokia.com" rel="author" title="Nokia Inc."> <link href="http://www.intel.com" rel="author" title="Intel"> <link href="https://drafts.csswg.org/css-animations-1/#animation-name" rel="help"> <link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help"> <link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help"> <meta content="animated" name="flags"> <meta content="When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once." name="assert"> <style> div { animation-name: sample; animation-duration: 10s; animation-iteration-count: -2; background-color: blue; height: 100px; width: 100px; position: relative; } @keyframes sample { from { left: 150px; } to { left: 0px; } } </style> </head><body> <p> Test passes if there is a filled blue square with 'Filler Text', which starts moving from right to left once. </p> <div>Filler Text</div> </body></html>