Slowing down the delay between "frames" in a CSS animation?

Slowing down the delay between "frames" in a CSS animation?

By : Denise Canizalez
Date : November 21 2020, 09:01 AM
I wish this helpful for you You can decrease the CPU rendering time by using a steps() as the animation-timing-function.
This property is applied on a keyframe basis; since your keyframes are not simetrical, it would be better to set different number of steps on each rule
code :
.base {
    width: 900px;
    height: 600px;
    position: relative;
    overflow: hidden;
    background-image: url(http://placekitten.com/1000/750);
    background-size: cover;
    animation: rotatehue infinite 12s;

@keyframes rotatehue {
    0% { animation-timing-function: steps(3);  
         -webkit-filter: hue-rotate(0deg); }
   63% { animation-timing-function: steps(2);  
         -webkit-filter: hue-rotate(360deg); }
  100% { -webkit-filter: hue-rotate(0deg); }
<div class="base"></div>

Share : facebook icon twitter icon
How to determine the best "framerate" (setInterval delay) to use in a JavaScript animation loop?

How to determine the best "framerate" (setInterval delay) to use in a JavaScript animation loop?

By : Naveen
Date : March 29 2020, 07:55 AM
like below fixes the issue I would venture to say that a substantial fraction of web users are using monitors that refresh at 60Hz, which translates to one frame every 16.66ms. So to make the monitor the bottleneck, you need to produce frames faster than 16.66ms.
There are two reasons you would pick a value like 13ms. First, the browser needs a little bit of time to repaint the screen (in my experience, never less than 1ms). Which puts you at, say, updating every 15ms, which happens to be a very interesting number - the standard timer resolution on Windows is 15ms (see John Resig's blog post). I suspect that an well-written 15ms animation looks very close to the same on a wide variety of browsers/operating systems.
Canvas animation "slowing down" when scrolling up & down rapidly

Canvas animation "slowing down" when scrolling up & down rapidly

By : user5445195
Date : March 29 2020, 07:55 AM
seems to work fine You got some good advises from @Blindman67 and @markE (his answer is now deleted), about
don't use setInterval for an animation throttle your scroll event
code :
// our flag
var scrolling;
    // only if we haven't already stacked our function
        // raise our flag
        scrolling = true
            // add the callback function
            // release the flag for next frame
            scrolling = false;
var BorderAnimation = function() {
  // a global array for all our animations
  var list = [];

  // init one animation per canvas
  var initAnim = function() {
    // our canvas
    var c = this;
    // our animation object
    var a = {};
    a.ctx = c.getContext('2d');
    // a function to check if our canvas is visible in the screen
    a.isVisible = function(min, max) {
      return min < c.offsetTop + a.height && max > c.offsetTop;
    // a trigger
    a.play = function() {
      // fire only if we're not already animating, and if we're not already finished
      if (!a.playing && !a.ended) {
        a.playing = true;
    // reverse trigger
    a.pause = function() {
        a.playing = false;
      // our looping function
    var loop = function() {
      // perform our drawing operations
      // and only if we should still be playing...
      if (a.playing) {
    // init our canvas' size and store it in our anim object
    a.width = c.width = $(window).width() / 4 * 3;
    a.height = c.height = $(window).height() / 2;
    // initialize the drawings for this animation
    // push our animation in the global array

  // this does need to be made outside, but I feel it's cleaner to separate it, 
  //	and if I'm not wrong, it should avoid declaring these functions in the loop.
  var initDrawing = function(anim) {

    var ctx = anim.ctx;

    var Point = function(x, y) {
      this.x = x;
      this.y = y;
    var points = [
      new Point(0, 0),
      new Point(anim.width, 0),
      new Point(anim.width, anim.height),
      new Point(0, anim.height),
      new Point(0, -10),

    function calcWaypoints(vertices) {
      var waypointsList = [];
      for (var i = 1; i < vertices.length; i++) {
        var pt0 = vertices[i - 1];
        var pt1 = vertices[i];
        var dx = pt1.x - pt0.x;
        var dy = pt1.y - pt0.y;
        for (var j = 0; j < 50; j++) {
          var x = pt0.x + dx * j / 50;
          var y = pt0.y + dy * j / 50;
            x: x,
            y: y
      return (waypointsList);

    var wayPoints = calcWaypoints(points);

    ctx.strokeStyle = "rgba(0,0,0,0.5)";
    ctx.lineWidth = 5;
    ctx.globalCompositeOperation = 'destination-atop';
    // always better to add this, e.g if you plan to make a `reset` function
    anim.ctx.moveTo(points[0].x, points[0].y);

    var counter = 1;
    // store into our drawing object the drawing operations
    anim.draw = function() {
      // we reached the end
      if (counter >= wayPoints.length) {
        anim.playing = false;
        anim.ended = true;

      var point = wayPoints[counter++];

      ctx.lineTo(point.x, point.y);
      //  ctx.clearRect(0,0,anim.width, anim.height); // don't you need it ???
  // a single call to the DOM

  var scrolling;
  var checkPos = function() {
    // release the flag
    scrolling = false;
    var st = pageYOffset; // it's just the same as $(window).scrollTop();
    // loop over our list of animations
    list.forEach(function(a) {
      // the canvas is in the screen
      if (a.isVisible(st, st + window.innerHeight)) {
        // it will be blocked if already playing
      } else {
        // stop the loop
  $(window).scroll(function() {
    if (!scrolling) {
      // set the flag
      scrolling = true;
  // if you want to do something with these animations, e.g debugging
  return list;
canvas {
  width: 35vw;
  height: 50vh;
  display: inline-block;
  vertical-align: top;
canvas:first-child {
  margin: 0 5vw 0 0;
div {
  width: 75vw;
  height: 50vh;
  margin: 100px auto;
  font-size: 0;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Visibility "animation" but a delay on the reverse effect in SCSS

Visibility "animation" but a delay on the reverse effect in SCSS

By : user2205381
Date : March 29 2020, 07:55 AM
help you fix your problem I'm creating an element that I want to hide initially, but when a class is added, it will appear and animate the top. The issue with this, is that on class remove, the visibility is triggered instantly, then top is animated. How do I make sure, in SCSS, that the on class remove, visibility isn't effected until after the top animation? , You could have a different transition for .is_visible
code :
$(window).on("load", function() {
  $("button").click(function() {
.nav-slider {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  background-color: $white;
  z-index: 1;
  visibility: hidden;
  padding-top: 40px;
  transition: top 2s, visibility 2s;

.nav-slider.is_visible {
  transition: top 2s, visibility 0s;
  top: 60px;
  visibility: visible;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-slider">

Swift - slowing down "too fast" animation (UIImage updates) -- aka is NSTimer the only option here?

Swift - slowing down "too fast" animation (UIImage updates) -- aka is NSTimer the only option here?

By : nuxr00t
Date : March 29 2020, 07:55 AM
Does that help I had exactly same problem back in days, entire loop is finished before the view is refreshed as @doctordoder mentioned. Solved with using NSTimer
"Total frames" and "Janky frames" in dumpsys gfxinfo report

"Total frames" and "Janky frames" in dumpsys gfxinfo report

By : user5704190
Date : March 29 2020, 07:55 AM
To fix this issue "Total Frames" : Number of frames created to render . "Janky Frames" : Number of dropped frames. "Actual Frames rendered" : Total Frames - Janky Frames.
Even though increase in total Frames and decrease in Janky
Related Posts Related Posts :
  • Cocoa webview UserAgent "webkit-legacy" issue
  • is it possible to create a background like this using css3?
  • Unexpected space between two divs
  • border-radius renders edges from gradient-background
  • Pointy leaf shape CSS
  • Background-Blend-Mode for multiple background images
  • Safari won't -webkit-transform: scale()
  • Changing checkbox layout without using label
  • Combining CSS nth-child functions
  • angularjs / gridster / n3-charts : $digest error in chrome/firefox but not in safari
  • BEM multiple classes selector
  • What are the default IE select box styles?
  • Fill element with slanted background on hover
  • Bootstrap columns not showing correctly in Firefox
  • Center an element in Bootstrap 4 Navbar
  • CSS 'Content footer' sticks to the bottom when content doesn't exceed scrollheight but flows with content when it does
  • Scrolling with ionic css (without ionic.js)
  • How exactly background-size and background-repeat works?
  • How to keep the div and label in the same row?
  • How to use css3 'flexbox' to make a layout like this?
  • Trying to center an image within a flex item using flexbox. What's going on here?
  • Why does the poster attribute of the video element cause my video to offset?
  • Removing a class in a CSS stylesheet
  • How to CSS pairs of DIV text left/right of center
  • create custom size button in ionic
  • Dynamically build up a SASS map and then use the values
  • Which browsers support -webkit-text-fill-color?
  • Scale of image with CSS3 animation
  • Remove horizontal scroll in block with "position:absolute" divs inside
  • Absolute positioned div split into two when displayed
  • How to place field label on top of field instead of left side in Grails
  • Decreased CSS Specificity with new HTML5 elements
  • Why isn't the width or margin in my @media query registering properly?
  • DIV's background ain't visible around <textarea> placed within
  • Centering divs inside a container
  • How to get multiple bottom only borders on a circle
  • keyframe animation on load
  • CSS transform Scale translates the object, how to avoid this?
  • css hover effect fixed to dev element and not extending when scrolling
  • How to get bootstrap columns to stack responsively?
  • Creating an MVC Layout that has a sidebar sometimes and other times not
  • create 3 responsive box with background color and Image
  • wordpress registration page - create a style sheet for it
  • How to put logo in left, and text vertically-aligned next to it?
  • css dropdown menu not displayed
  • CSS not loading correctly on Jekyll (GitHub)
  • Why this :not() instruction isn't working?
  • How to vertical-align:bottom 2 floated divs with text
  • Foundation SASS
  • How to display two columns of blocks with CSS
  • Validating check boxes in HTML
  • CSS how to fill height of container?
  • column-width property in Multiple column layout
  • Rails 4 x SASS: load specific stylesheet in Internet Explorer
  • How to change CSS of website if accessed through a mobile browser
  • Transform LESS Mixin into Stylus Mixin
  • Is there a way to make Chrome display the SVG cursor as it is in Safari?
  • What is the best way to make a line between 2 span?
  • Bootstrap sides whitespace
  • how to keep all floated images in one line?
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co