Background-Position Not Working with CSS Animation and Linear Gradient

Background-position not working with CSS animation and linear gradient

Added your code

background-size: 250% 250%;

Example

.slideToUnlock {
  background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  animation: slidetounlock 5s infinite;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  background-size: 250% 250%;
}

https://jsfiddle.net/ekLamtbL/2/

CSS gradient background animation is not animating

Your code is actually working, just not the way you intended it to do so. The gradient is being animated, the only issue is that it is not moving since you have not set a background-size larger than 100%, therefore the positions you alternate between are the same in this case.

If you declare background-size like below, your gradient background will be animated.

.gb-layout-hero-1 {
    background: linear-gradient(45deg, rgba(9,9,121,1) 25%, rgba(0,212,255,1) 30%);
    background-size: 150%;
    animation: gradient 1300ms linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 130%}
}

<div class="gb-layout-hero-1" style="width: 1000%; height:200px;"></div>

CSS background gradient transition not working

By specifying backgrouns-size:100% 100% you made the size of your gradient the same as the div; thus all the values of background-position are equivalent so you won't see any movement. Change the background-size and the gradient will move.

Make it bigger than the div

@keyframes warpedBackground { 

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

#gradientsquare {

  border:1px solid;

  width: 300px;

  height: 300px;

  background: linear-gradient(170deg, #003a5d, #94c7e6);

  background-size: 500% 100%;

  animation: warpedBackground 1s ease infinite;

}

<div id="gradientsquare"></div>

@keyframes animation background-position not working

The problem is I was using helium-ext.scss, and in this cases you have to use helium-ext-defaults.scss. It was inded related with cuba-framerwork and his theme. To solve it just put you @keyframe inside of helium-ext-defaults.scss and the rest of the code on helium-ext.scss.

How to animate linear-gradient without using background-position?

You can replace the animation using pseudo element where you apply translation. The trick is to consider fixed element to replace background-attachment:fixed, then you make the element twice bigger as the screen and you translate it from left to right.

const cardsRoot = document.getElementById('cards')
const addButton = document.getElementById('add')
const card = document.getElementsByClassName('card')[0]
let cardsCount = 1

addButton.addEventListener('click', () => {
  cardsRoot.innerHTML = ''
  cardsCount++
  for (let i = 0; i < cardsCount; i++) {
    let cardClone = card.cloneNode(true)
    cardsRoot.appendChild(cardClone)
  }
})

body {
  padding: 40px;
}

.card {
  display: inline-flex;
  margin-top: 20px;
}

.stub {
  width: 150px;
  height: 12px;
  margin: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  position:relative;
  z-index:0;
  /*overflow:hidden; this is no more working, using mask instead */
  -webkit-mask:linear-gradient(#fff 0 0);
  /* OR clip-path:inset(0) */
}
.stub:before {
  content:"";
  position:fixed;
  z-index:-1;
  top:0;
  right:0;
  width:200vw;
  bottom:0;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.04),rgba(0, 0, 0, 0.04)) left/50% 100%,
    linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) right/50% 100%;
  background-repeat:no-repeat;
  animation: stub 1.3s linear infinite;
  pointer-events:none;
}

.circle {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 20px;
}

@keyframes stub {
  0% { transform:translate(0); }
  100% { transform:translate(50%); }
}

<button id="add">
  ADD CARD
</button>

<div id="cards">
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
</div>

CSS3 Background Position Not Moving in Animation

I had added background-size: 400% 400%; in health, class your not use that.

.health {

 width: 100wh;

 height: 90vh;

 color: #fff;

 background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);

 background-size: 400% 400%;

 -webkit-animation: gradian 15s ease infinite;

 -moz-animation: gradian 15s ease infinite;

 animation: gradian 15s ease infinite;

}

@-webkit-keyframes gradian {

 0% {

  background-position: 0% 50%

 }

 50% {

  background-position: 100% 50%

 }

 100% {

  background-position: 0% 50%

 }

}

@-moz-keyframes gradian {

 0% {

  background-position: 0% 50%

 }

 50% {

  background-position: 100% 50%

 }

 100% {

  background-position: 0% 50%

 }

}

@keyframes gradian {

 0% {

  background-position: 0% 50%

 }

 50% {

  background-position: 100% 50%

 }

 100% {

  background-position: 0% 50%

 }

}

<section class="health"  class="section-bg">

<div class="container">

      <div class="row portfolio-container" title ="Click here to order Diabetes diseases" style="">

          <a href="#"><div class="col-lg-12 col-md-12 portfolio-item filter-app wow fadeInRight" data-wow-delay="0.2s" style="position: absolute;visibility: visible;animation-delay: 0.2s;animation-name: fadeInRight;overflow: visible;">

            <div class="portfolio-wrap">

                 <div id="" class ="col-lg-12 col-md-12">

                      <center>

                          <p style="font-size: 42px;color: aliceblue;font-weight: bold;">Health Boosters</p>

                      </center>

                    </div>

               </div>

           </div>

         </a>

    <div class ="col-lg-12 col-md-12" style="height: 47px;animation-name:colorjoin;animation-duration:1s;">

                    </div></div></div>

            </section>

CSS Gradient animation not working

Yup.... You've got to close off your body css and have your keyframe animations in their own accord. Like this http://jsfiddle.net/9s9g6ktu/1/

CSS3 background gradient animation - background-size:cover not working?

To get the animation to pause 3 seconds and continue you have to first set animation-iteration-count: infinite; and then use the @keyframes definition to control the delay by using a percent to be the pause.

In the demo below, I'm using 0%-50% to be the full animation. Then I use %50-%100 to be the pause.

If you want to use background-size: 100% 100%;, you need to set your background-position: -2000px 0; so it's totally off the left side of the screen if you want your animation to scroll by. You also need to adjust your @keyframes so it scrolls totally off the right side when done. Because of this extra distance, you'll need to adjust your duration accordingly to get the effect you're looking for.

Demo: http://jsfiddle.net/ThinkingStiff/jaRW3/

@keyframes masked-animation {
    0% {background-position: -2000px 0;}
    50% {background-position: 2000px 0;}
    100% {background-position: 2000px 0;}
}

Here I'm using a 6s duration, of which 50% will be the pause and %50 will be the animation, or 3 seconds each. It also waits 3 seconds before starting. This uses the shorthand syntax which saves a lot of space.

animation: masked-animation 6s ease-in-out 3s infinite;
background-position: -2000px 0;
background-repeat: no-repeat;
background-size: 100% 100%;

---

Related Topics