CSS剪輯使用gpu？

在我開發的一個HTML5遊戲中，我在css動畫中使用了CSS特徵剪輯。但是我意識到它正在影響遊戲的表現。CSS剪輯使用gpu？

我想剪輯沒有使用GPU加速（如果我錯了，請讓我知道）。有一種方法可以實現與使用GPU加速的剪輯相同的效果嗎？

這是我簡單的動畫：

@-webkit-keyframes animation 
    { 
    0% 
     { 
    clip:rect(0px,auto,0px,auto); 
    } 

    50% 
    { 
    clip:rect(0px,auto, 69px,auto); 
    } 

    100% 
     { 
    clip:rect(0px,auto,0px,auto); 
    } 
    }

在此先感謝。

來源

2013-07-15 Victor Ga

可以使用translate3d或類似CSS和3個容器實現了類似的結果：

HTML：

<input id="run" type="button" value="Run"> 
<ul style="list-style:none;"> 
    <li style="position:relative; overflow:hidden;"> 
     <div id="content" style="background-color:#ff0000; width:100px; height:100px;"> 
      <p>this is content</p> 
     </div> 
    </li> 
</ul> 
<p id="totalFrames">0</p>

的Javascript：

var transform = /(Chrome|Safari)/.test(navigator.userAgent) ? '-webkit-transform' : 'transform', 
    run = document.getElementById('run'), 
    content = document.getElementById('content'), 
    container = document.getElementById('container'), 
    ticks = document.getElementById('totalFrames'), 
    curPos = 0, 
    end = 100; 

function tick() { 
    var dist = (end - curPos) * .05; 
    curPos += dist; 

    if (Math.abs(dist) > .01) { 
     ticks.innerHTML = requestAnimationFrame(tick, null); 
     } else { 
     curPos = end; 
     end = -curPos; 
    } 
    content.style[transform] = 'translate3d(0, ' + curPos + 'px, 0)'; 
    container.style[transform] = 'translate3d(0, ' + -curPos + 'px, 0)'; 
} 
run.addEventListener('click', tick);

的jsfiddle：http://jsfiddle.net/my4Sv/7/

來源

2014-03-24 21:00:23 user3457231

替換此'navigator.userAgent'測試類似於document.style'中的''webkitTransform'。此外，javascript屬性不是'-webkit-transform'，而是我之前引用的那個。 –

CSS剪輯使用gpu？

回答

相關問題