Question 249368 in CSS Question posted in
Some basic documentation can be found here.

Css – Improve Performance with a Pause on an Infinite Gradient Animation

For performance reasons, I would like to add a pause to an infinite gradient animation, which was created using https://www.gradient-animator.com/, to give web browsers a break from rendering transitions between different colors.

Here’s an example script created using the aforementioned website.

.css-selector {
    background: linear-gradient(270deg, #3adab1, #3a7bda, #853ada);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Does anyone have a suggestion on achieving this by modifing this CSS? Any help would be greatly appreciated!

This site says it’s achievable by cycling between the ‘paused’ and ‘running’ states, though I’m not sure how I’d implement it to this exactly. I’ve searched Google and Stackoverflow which led me to creating this.

Tags:

2

Answers


  1. 0

    Extending the keyframes duration and adding a point in the middle where the animation remains unchanged could do the fix.

    The concept is to modify the keyframes in a way that the animation takes place between 0% and 40%, then there’s a break between 40% and 60%, and finally the animation finishes between 60% and 100%. This approach introduces a 20% duration pause in the middle of the animation.

    Just adjust your CSS a little bit like this:

    .css-selector {
    background: linear-gradient(270deg, #3adab1, #3a7bda, #853ada);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    40%{background-position:100% 50%}
    60%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    40%{background-position:100% 50%}
    60%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    40%{background-position:100% 50%}
    60%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
    Login or Signup to reply.
  2. 0

    The animation can go from 0 to 50% of the animation duration then stay at the same place for the 50% to 100% duration.

    So, this snippet puts the duration to 60s. On my laptop the gpu is used just under 50% for30 seconds, then 0% for30 seconds and so on.

    The user does get to see the same static colors for half the time. I assune this is what is required by ‘paused’.

    <style>
  .css-selector {
    background: linear-gradient(270deg, #3adab1, #3a7bda, #853ada);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 60s ease infinite;
    -moz-animation: AnimationName 60s ease infinite;
    animation: AnimationName 60s ease infinite;
    width: 100vw;
    height: 100vh;
  }
  
  @-webkit-keyframes AnimationName {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @-moz-keyframes AnimationName {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @keyframes AnimationName {
    0% {
      background-position: 0% 50%
    }
    25% {
      background-position: 100% 50%
    }
    50%,
    100% {
      background-position: 0% 50%
    }
  }
</style>
<div class="css-selector"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search