background-position-in-delay.html (637B)
1 <!DOCTYPE html> 2 <title>background-position-x animation in delay phase</title> 3 <style> 4 @keyframes holdBackgroundPosition { 5 from,to { background-position-x: 100%; } 6 } 7 #test { 8 height: 100px; 9 width: 100px; 10 background-repeat: no-repeat; 11 background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */ 12 animation: holdBackgroundPosition 100s 100s infinite; 13 background-position-x: 50%; 14 } 15 </style> 16 <div id="test" class="reftest-opaque-layer"></div>