Databases
StackOverflow2013
Postsdbo
PO100% CPU usage long after CSS3 keyframe animation has finished - how can it be avoided?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO100% CPU usage long after CSS3 keyframe animation has finished - how can it be avoided?
    primarykey
    data
    text
    <p>I am trying some CSS3 keyframe animations in a web app I'm developing. I have tried both my own custom animations and some provided by <a href="https://daneden.me/animate/" rel="nofollow">animate.css</a>. The result is the same: the animation works fine, but after a while, even if I leave the browser alone, the CPU usage goes up to around 100% and stays there. Killing that process kills the web app, removing the CSS animations gets rid of the problem, so there is no doubt what's causing it. I am mainly using Chrome, and that's where I have seen the problem so far. </p> <p>Target platforms for the web app includes iOS and Android via Phonegap, Windows and OSX via node-webkit. The problems I describe do not seem to occur in mobile Safari, but what about other platforms? Is this a general problem with keyframe animations? Are there any tricks to avoid this?</p> <p>EDIT: Added <a href="http://jsfiddle.net/perqa/Z4Xhp/" rel="nofollow">demo link</a>, but unable to replicate the problem. In the full app I am using a number of libraries and frameworks, like AngularJS, Angular-UI, Angular-UI-router, Fastclick, Animate.css, etc. I guess they might interfere somehow? Hard to say, but removing my animations from the app also removed the delayed 100% CPU usage.</p> <p>HTML:</p> <pre><code>&lt;button id="start"&gt;Start&lt;/button&gt; &lt;button id="reset"&gt;Reset&lt;/button&gt; &lt;br/&gt; &lt;div id="ball" class="ball"&gt;&lt;/div&gt; </code></pre> <p>Javascript:</p> <pre><code>document.getElementById('start').addEventListener('click', function(e) { document.getElementById('ball').classList.add('remove'); }); document.getElementById('reset').addEventListener('click', function(e) { document.getElementById('ball').classList.remove('remove'); }); </code></pre> <p>CSS:</p> <pre><code>.ball { width:100px; height:100px; border-radius:100px; background-color:darkred; position:absolute; top:100px; left:200px; } @-webkit-keyframes slide { from { top:100px; left:200px; } to { top:100px; left:-100px; } } .remove { animation: slide 1s linear; -webkit-animation: slide 1s linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPer Quested Aronsson
    1. USPer Quested Aronsson
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CODemo link please!!
      singulars
      1. PO100% CPU usage long after CSS3 keyframe animation has finished - how can it be avoided?
      1. UStomByrer
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload