css/css-animations/animation-fill-mode-003-manual.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Animations Test: animation-fill-mode - backwards</title>
 <link rel="author" title="Intel" href="http://www.intel.com">
 <link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
 <meta name="flags" content="animated">
 <meta name="assert" content="When animation-fill-mode is set to backwards,
                              animation-delay is set a positive time offset,
                              and animation-direction is 'normal' or 'alternate-reverse',
                              animation will apply the from or 0% keyframe
                              that will start the first iteration.">
 <style>
   div {
     animation-name: sample;
     animation-duration: 5s;
     animation-delay: 5s;
     animation-fill-mode: backwards;

     background-color: blue;
     height: 100px;
     width: 100px;
     position: relative;
   }
   @keyframes sample {
     from {
       background-color: yellow;
     }
     to {
       background-color: green;
     }
   }
 </style>
 <body>
   <p>
     Test passes if there is a filled color square with 'Filler Text',
     whose color gradually changes in the order: YELLOW to GREEN.
     After the animation is finished, the color goes back to BLUE.
   </p>
   <div>Filler Text</div>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Animations Test: animation-fill-mode - backwards</title>
	<link rel="author" title="Intel" href="http://www.intel.com">
	<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
	<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
	<meta name="flags" content="animated">
	<meta name="assert" content="When animation-fill-mode is set to backwards,
	animation-delay is set a positive time offset,
	and animation-direction is 'normal' or 'alternate-reverse',
	animation will apply the from or 0% keyframe
	that will start the first iteration.">
	<style>
	div {
	animation-name: sample;
	animation-duration: 5s;
	animation-delay: 5s;
	animation-fill-mode: backwards;

	background-color: blue;
	height: 100px;
	width: 100px;
	position: relative;
	}
	@keyframes sample {
	from {
	background-color: yellow;
	}
	to {
	background-color: green;
	}
	}
	</style>
	<body>
	<p>
	Test passes if there is a filled color square with 'Filler Text',
	whose color gradually changes in the order: YELLOW to GREEN.
	After the animation is finished, the color goes back to BLUE.
	</p>
	<div>Filler Text</div>
	</body>