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)

Question:

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?

Solution:

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.


Answer:

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.


Related:


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


css,css3
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? ...

Manual slide-in animation using delta time


c#,animation,unity3d
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...

CSS drop down navigation


css,html5,css3,drop-down-menu,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">...

Using CSS :after to shade a button:hover


css,css3,button
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...

Setting overflow: scroll on a table with display: flex


html,css,css3,overflow,flexbox
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...

CSS :hover that shows more than one image


html,css,css3
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...

Add CSS3 transitions to jQuery Animate script


javascript,jquery,html,css,css3
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...

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


jquery,loops,animation
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...

css3 animation text repeatly


css,css3,css-animations,keyframe
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...

Responsive css always applying landscape


html,css3,responsive-design,screen-orientation
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 bouncing line loader animation


html,css,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% {...

Pure Css transition slide down panel not working


html,css,css3
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"...

QtQuick2 - QML - create infinite moving line animation


javascript,animation,qml,infinite-scroll,qtquick2
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...

Snap SVG .animate callback fires immediately


javascript,jquery,animation,svg,snap.svg
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...

Two div side by side in one container css


css,css3
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:...

Setting up the page grid using push and pull


html,twitter-bootstrap,css3,twitter-bootstrap-3
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> ...

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


html,css,css3
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...

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


html,css,css3
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...

Smooth mouse-out animation


css,css3,css-transitions,css-animations
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...

drop down menu toggle does not work


jquery,html,css,css3
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...

CSS3 Columns children with margin issue w// Chrome


javascript,jquery,html,css,css3
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 use .load(function() { on a large function


javascript,jquery,ajax,css3
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...

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


jquery,html,css,css3
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>...

Dynamic font-size according to device


css,css3
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...

Round edges on shorter side in CSS [duplicate]


css,css3,css-shapes
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...

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


html5,css3,twitter-bootstrap-3
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...

Content section overlap footer


html,css,twitter-bootstrap,css3,twitter-bootstrap-3
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...

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


java,animation,colors,javafx,background
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...

CSS Image Background - Same Scale Across Different Devices


html,css,css3
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...

CSS Container Wrap shaped Polygons


css3,polygon,css-shapes
How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ? ...

css disappears on the click of a button


javascript,jquery,html,css,css3
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() {...

Eloquent Javascript: DOM Animation snippet


javascript,animation,dom,recursion,requestanimationframe
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...

Pure CSS animation visibility with delay


css,css3,css-animations
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...

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


css,css3,css-selectors,pseudo-class
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....

SceneKit + Collada + animation


objective-c,animation,blender,scenekit,collada
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...

How to make my nav bar responsive


html5,css3,media-queries
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;...

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


css,css3,sass,compass
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,...

Swap nav and div vertically uing CSS only


html,css,html5,css3
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...

Animate removal of list items with css


css,angularjs,css3,animation,css-animations
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:...

how to align column to the right?


angularjs,css3,twitter-bootstrap-3
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...

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


css,css3,flexbox
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...

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


html,css,css3
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...

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


html,css,css3,css-selectors,css-specificity
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...

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


javascript,html,css,css3,layout
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...

Click on link next link should be display on same page


javascript,php,jquery,html,css3
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...

Div Text's Color Changes when Printed


html,css,css3,media-queries,media
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...

Colour overlay on hover


css3,hover,overlay,css-transforms
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,...

Stop fadin/fadeout event jquery


javascript,jquery,animation,event-handling
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...

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


html,css,css3
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...