#pullDown, #pullUp { background-color:#eeeeee; height:2.5em; line-height:2.5em; padding:0.3125em 0.625em; border-bottom:0.0625em solid #ccc; font-weight:bold; font-size:0.875em; color:#888; } #pullDown .pullDownIcon, #pullUp .pullUpIcon { display:block; float:left; width:2.5em; height:2.5em; background:url(../img/pull-icon@2x.png) 0 0 no-repeat; -webkit-background-size:2.5em 5.0em; background-size:2.5em 5.0em; -webkit-transition-property:-webkit-transform; -webkit-transition-duration:250ms; } #pullDown .pullDownIcon { background-color:#eeeeee; -webkit-transform:rotate(0deg) translateZ(0); } #pullUp .pullUpIcon { background-color:#eeeeee; -webkit-transform:rotate(-180deg) translateZ(0); } #pullDown.flip .pullDownIcon { background-color:#eeeeee; -webkit-transform:rotate(-180deg) translateZ(0); } #pullUp.flip .pullUpIcon { background-color:#eeeeee; -webkit-transform:rotate(0deg) translateZ(0); } #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { background-color:#eeeeee; background-position:0 100%; -webkit-transform:rotate(0deg) translateZ(0); -webkit-transition-duration:0ms; -webkit-animation-name:loading; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } @-webkit-keyframes loading { from { -webkit-transform:rotate(0deg) translateZ(0); } to { -webkit-transform:rotate(360deg) translateZ(0); } }