<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS Tests: CSS Animations : animation-name set to valid keyframes rule name</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-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen."> <style type="text/css"> /* */ @-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: relative; -webkit-animation-name: sample; -webkit-animation-duration: 10s; -moz-animation-name: sample; -moz-animation-duration: 10s; animation-name: sample; animation-duration: 10s; } /* */ </style> </head> <body> <p id="testdetails"> <p> Assertion: When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen. </p> <ul> <li>PASS if a blue colored box with text "CSS3 Testing Content" inside it appears below and animates/moves towards left.</li> <li>FAIL if box fails to transcend towards left.</li> </ul> </p> <div class="abc"> CSS3 Testing Content </div> </body> </html>