<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Tests: CSS Animations : animation-duration value set to 0 (zero).</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" /> <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" /> <link rel="author" title="Nokia Inc." href="http://www.nokia.com/" /> <meta name="flags" content="animated" /> <meta name="assert" content="When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen)." /> <style type="text/css"> /* <![CDATA[ */ @-webkit-keyframes sample { from { left: 150px; } to { left: 0px; } } @-moz-keyframes sample { from { left: 150px; } to { left: 0px; } } @keyframes sample { from { left: 150px; } to { left: 0px; } } .abc { background-color: blue; width: 100px; height: 100px; padding: 0.2em 1em; margin: 6em; position: absolute; left: 0px; -webkit-animation-name: sample; -webkit-animation-duration: 0s; -moz-animation-name: sample; -moz-animation-duration: 0s; animation-name: sample; animation-duration: 0s; } .def { position: absolute; background-color: red; left: 0px; width: 100px; height: 100px; padding: 0.2em 1em; margin: 6em; z-index: -1; } /* ]]> */ </style> </head> <body> <p id="testdetails"> Assertion: When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen). </p> <p> <ul> <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li> <li>FAIL if blue box is animated/moved or if red is visible.</li> </ul> </p> <div class="abc"> CSS3 Testing Content </div> <div class="def"> Reference </div> </body> </html>