css/css-animations-1/animation-shorthand-002.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Animations Test: animation shorthand - ::after</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">
 <meta name="flags" content="animated">
 <meta name="assert" content="Check that animation shorthand applies to the ::after pseudo element
                              and accepts time values for animation-duration and animation-delay
                              in order.">
 <style>
   div::after {
     animation: 10s 2s sample;

     background-color: blue;
     content: "Filler Text";
     display: block;
     height: 100px;
     width: 100px;
     position: relative;
   }

   @keyframes sample {
     from {
       left: 150px;
     }
     to {
       left: 0px;
     }
   }
 </style>
 <body>
   <p>
     Test passes if there is a filled blue square with 'Filler Text',
     which starts staying left about 2 seconds, and then moves from right to left
     and lasts for a span of 10 seconds.
   </p>
   <div></div>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Animations Test: animation shorthand - ::after</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">
	<meta name="flags" content="animated">
	<meta name="assert" content="Check that animation shorthand applies to the ::after pseudo element
	and accepts time values for animation-duration and animation-delay
	in order.">
	<style>
	div::after {
	animation: 10s 2s sample;

	background-color: blue;
	content: "Filler Text";
	display: block;
	height: 100px;
	width: 100px;
	position: relative;
	}

	@keyframes sample {
	from {
	left: 150px;
	}
	to {
	left: 0px;
	}
	}
	</style>
	<body>
	<p>
	Test passes if there is a filled blue square with 'Filler Text',
	which starts staying left about 2 seconds, and then moves from right to left
	and lasts for a span of 10 seconds.
	</p>
	<div></div>
	</body>