css3,animation,transform,css-transitions,transition , CSS3 transform transition stutters when value changes frequently (not performance related)

CSS3 transform transition stutters when value changes frequently (not performance related)


Tag: css3,animation,transform,css-transitions,transition

I'm currently building a compass app in HTML and CSS in a PhoneGap project with the DeviceOrientation plugin to get the compass heading.

I created a jsbin to emulate the heading change.

The problem I'm having is that when the value changes frequently (every 200 ms), the CSS transition stutters quite a bit.

You can see this problem in action by going to the jsbin I linked above and slowly drag the slider to increase or decrease the rotation degree, especially when you drag the slider back and forth slowly.

That leads me to believe that this is not just a performance or framerate issue; it's most likely caused by the quick value changes that interrupt the transition.

Please note in the actual PhoneGap application, the compass value is refreshed every 200 milliseconds (or some other arbitrary interval) instead of the inconsistent update interval you see in the jsbin simulation.

I tried to play with the transition duration a bit and none of them worked. Here's what I've tried:

  1. Tried to make the transition duration 0.5ms short than the value change interval. E.g. get new value every 500ms, set transition duration to be 450ms. Not only gives me stutter, but also make the entire transition lack significantly.
  2. Tried to make the transition duration longer than the update interval (out of despair), surprised that it worked... For a little while then start giving me stutter again.
  3. Tried to make the transition duration the same as the update interval, same stutters.

Now my question is: How should I go about making the CSS3 transition smooth without stutter when the rotation value changes frequently? Also, would switching to JavaScript animation alleviate this problem, like pausing the transition when the value changes?


Replace CSS3 transition with Javascript animation. I used Velocity.js for the animation. Every time the compass heading value changes, I first finish the previous animation by doing Velocity(compass_element, "finish"), then I animate the rotateZ of that element.


Saw your post on CodeMentor. The issue is that every time the value changes, it stops the transition that is currently happening and starts another of the same (long) duration. If this is done in rapid succession, it doesn't look like it's doing much of anything because it is trying to ease in constantly and never gets very far into transition, causing the stutter.

You instead need to make the transition depend on the distance to be traveled, not just the time like you currently are. There are many ways to do this, a couple are as follows:

The other option (which I'd likely do personally) is just make the transition duration much shorter, something like 0.1s seems to work pretty well, when dragged. You could change the transition duration on dragstart to this shorter value and toggle it back on dragstop, leaving a longer transition duration for clicks.


Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

I have a containing row that contains up to three divs. Each child div either has a background image, or just some text. As the image divs are using background-image and have no defined width/height, they have an aspect ratio set using the aspect ratio padding method (using pseudo-elements in...

Snap SVG .animate callback fires immediately

I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is now, the element is removed...

How to properly position divs for overlay hover effect with text underneath

I have two rows of 4-boxed divs. The goal is to have a header within each box, and then hovering over the box will present more detailed p text with a faded background. I'm close, I just can't figure out how to actually layer the span overlay on top of...

css disappears on the click of a button

I got a countdown timer that starts working on click of a button. i tried to apply css to it, but when i click on the start button the css disappears. can anyone tell how i can retain my css the whole time here is my code @fiddle $('#startClock').click(function() {...

CSS :hover that shows more than one image

I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

how to use .load(function() { on a large function

I have 5 pretty large CSS3 / jQuery chain animations within a web page, these occur at 5 subpages, when the user navigates to each individual (5) subpages.. I would like to use / have the effect of jQuery's $( img ).load(function() { // Run code }); Except I only...

Float left and float right not working + sub-menu positioned under first UL item?

Been learning CSS and HTML quite a lot lately, and although I already know about stuff like float, positioning, margins, padding, etc, for some reason splitting up these 2 things are not working... And also my submenu is a bit wrong, refer to the image below: As you can see...

Dynamic font-size according to device

Small question, for which I can't find any answer. Is there a way to do this? I have 3 elements with different sizes. One with 30px, other with 22px and other with 16px. Now, when using a tablet to check this elements, they go off limits since I need to...

:nth-of-type selector overrides all other CSS selectors

I am trying to revise for my exam on HTML, JavaScript and CSS3; and I am a little confused at CSS selectors and which take priority. I have the following CSS: table { border: 1px solid black; } tr:nth-child(odd) { background-color: red; } tr td:nth-of-type(even) { background-color: blue; } td...

CSS3 Columns children with margin issue w// Chrome

http://dev.metertech.co.uk/technologies/patents-and-licensing On the page above you can see that the second column is pushed down a little from the top. On a page resize the issue corrects itself. All other pages, even those with the same number of <p> tags for the .content render the columns correctly. I have no...

How to make my nav bar responsive

I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

Responsive css always applying landscape

I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design). Anyone have an idea of what I'm doing wrong ? Thank you ! Guillaume **** edited new version: now working....

CSS Container Wrap shaped Polygons

How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ? ...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

Pure CSS animation visibility with delay

I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not. I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility...

Div Text's Color Changes when Printed

I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

CSS: How to flow text around both left and right images

I know float:left will allow text to flow around an image floated on the left. And float:right will allow text to flow around an image floated on the right. Is there a way to flow text around both a left and right image? ...

CSS bouncing line loader animation

Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction. This is my css @keyframes loader-animation { 0% {...

Fit an image inside a div that also has a title?

Here's my fiddle Here's my HTML: <div class="block"> <h2>Title</h2> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" /> </div> I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken...

Colour overlay on hover

I'm playing with a self developed theme on my blog. I've got a grid of images that click through to a particular category. I'm having a problems trying to create a hover effect over the images. I think probably because of the way I've used the link (absolutely positioning it,...

Smooth mouse-out animation

I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation. I can't work it out how to ensure smooth going back to the original state when not hovering anymore? So far it "jumps" when the diamond is in the middle...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

How can i make a jQuery animation loop on infinite, after it finish?

I have a jQuery animation, i have a flying monkey that has to rotate from left to right and from right to left, is working fine but i have to make the monkey loop. Right now i have improvised, i have made several divs into each other that rotate after...

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

This question already has an answer here: Compass wont generate cause an “invisible” error 1 answer When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector,...

Manual slide-in animation using delta time

I'm creating a simple slide-in animation for my game. The box is shown at the bottom with character dialog. The animation is supposed to look as follows: A square slides in from the left, then waits a bit, then expands to its full width. The box is made using Unity's...

drop down menu toggle does not work

So I am trying to create a dropdown menu using jQuery and I have tried several things. I tried using .hover(), .click(), and mouseenter() for the user's action, but nothing seems to work. I even tried toggle() and slideDown() for the event but nothing shows up on the screen when...

Round edges on shorter side in CSS [duplicate]

This question already has an answer here: Border-radius in percentage (%) and pixels (px) 1 answer I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this: If I use border-radius: 50%;, which makes corders...

Stop fadin/fadeout event jquery

I have a dive that flashs once on click. If you press the button multiple times it will keep flashing until the click count has been executed. I would like to so then if the user was to click the button multiple times, it would stop flashing after the last...

Swap nav and div vertically uing CSS only

So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

Setting up the page grid using push and pull

I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Click on link next link should be display on same page

I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

Eloquent Javascript: DOM Animation snippet

I'm trying to understand everything that is happening in this little code example in Eloquent Javascript: The Document Object Model (Chapter 13), but I'm not clear on where exactly the value for "time" is being passed into the animate() function before the function itself gets passed into requestAnimationFrame(). What exactly...

Add CSS3 transitions to jQuery Animate script

Below I have a script that loads images in a random order and flies them onto the screen beside each other. You can find the script here: https://jsfiddle.net/38e126f4/ I would now like to be able to add different random CSS3 transition effects to each image as they fly onto the...

css3 animation text repeatly

I am beginner of css3 animation. I want to rotate the text continuously. I tried, this is my fiddle location. https://jsfiddle.net/v3jds98d/ span { font-size:30px; position:absolute; top:40%; text-align:center; width:100%; left:0; color: transparent; opacity:0; -webkit-animation: textanimation 3s ; -moz-animation: textanimation 3s ; -ms-animation: textanimation 3s ; animation: textanimation 3s ; } .animation_text1...

How to position div which contains font-awesome icons to centre of another div?

I'm trying to position div which contains font-awesome icons to centre of another div but i cannot make it in the right way. I have following code: HTML: <div id="menuRightSide" > <div class="rightSideMenuItem"> <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div> </div> <div class="rightSideMenuItem"> <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>...

Content section overlap footer

I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

how to align column to the right?

I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line: <!--datetime row--> <div> <div class="col-md-6 form-group"> <label for="">Title:</label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li...

QtQuick2 - QML - create infinite moving line animation

Does anyone know how to implement linear animation, for example like in progress bars, where few of lines moving infinite in the bar from left to right or any other way? I'm going to use only QtQuick2 primitives and without any additional C++ components, glad to see any answers that...

Pure Css transition slide down panel not working

Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...

SceneKit + Collada + animation

I am trying to use Apple's SceneKit in order to load a model from Blender in Collada (dae) format, then apply animation on it from another Collada file, just like Apple did in their Banana example. I can do this with their models and animation files, however, if I open...

CSS Image Background - Same Scale Across Different Devices

I'm trying to create a website with possible multiple fluid background sections that are consistent in scale between mobile, tablet and desktop (including different resolutions). The background is to stay in the centre to cover the whole area and appears in the same scale across all device types. Things I...

Using CSS :after to shade a button:hover

I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily. All of these should darken on hover. It seems tedious to write button.(color):hover rules for every single color, so I've written this such that the :after section gets darker...

JavaFX - how to get background color of Tab, Button, etc

Problem description: I can't get background of object in JavaFX. I don't mean Shapes, but normal Nodes like Buttons, Tabs and others. I don't know how to access to theirs background color. What I want? I am developing IDE and I want to run Color animation on tab with file...

How do you make a div only extend in one direction when the outer container size increases?

I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents...

Is there an opposite CSS pseudo-class to :hover?

Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover....

Two div side by side in one container css

I want to have two div side by side in one container: the first is an image (the width is fixed but the code should be applied for different images with different widths) . The second will take the rest of the container. .conteiner { position: relative; } .image{ display:...

CSS drop down navigation

I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html# Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

Setting overflow: scroll on a table with display: flex

I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account. In the sample code below, the scroll stops at the letter K when it...

Animate removal of list items with css

I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...