CODEWITHSUNDEEP
css
Alan Ruiz
Alan Ruiz

Reputation: 29

In CSS, how do I animate the linear-gradient so it does a full 360 instead of a 180 loop?

Im trying to get it so that "alan" has this like 360 gold "shine" constantly on the website. My problem is that it just does a 180 loop. The top and Bottom don't align so it looks smooth. I've tried everything so far, this is my latest attempt in doing that but no matter how i cut the animation, it does the same 180 thing. Please help me out, i want the animation to look something like the white shine is going left to right and all the way back around in order. The brown is what messes it up. when the animation starts, the top brown is on the right and keeps on going to the right until the bottom brown is on the left, then it repeats. I want it so when the bottom brown is on the left, it continues on to the right until it takes the place of the top brown on the right. if that makes sense.

.about-alan{
    width: 400px;
    height: 100px;
    background: linear-gradient(
        to left,
        #462523 0,
        #cb9b51 22%, 
        #f6e27a 45%,
        #f6f2c0 50%,
        #f6e27a 55%,
        #cb9b51 78%,
        #462523 100%
    );
    background-size: 400% 400%;
    
    -webkit-animation: alan 3s linear infinite;
    -moz-animation: alan 3s linear infinite;
    animation: alan 3s linear infinite;   
}

@-webkit-keyframes alan {
    0%{background-position:100% 0%}
    100%{background-position:22% 78%}
    
}
@-moz-keyframes alan {
    0%{background-position:100% 0%}
    100%{background-position:22% 78%}
    
}
@keyframes alan {
    0%{background-position:100% 0%}
    100%{background-position:22% 78%}
    
}
<div class="about-alan"></div>

Upvotes: 2

Views: 163

Answers (1)

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

Add a wrapper with overflow hidden and set the child element to twice the width.
Then use background-size: 50% 100% to get a smooth looping transition.

.alan-wrapper {
    width: 400px;
    overflow: hidden;
}

.about-alan{
    font-family: sans-serif;
    margin-top: 0;
    font-size: 100px;
    display: inline-block;
    width: 800px;
    height: 100px;
    background-image: linear-gradient(
        to left,
        #462523 0,
        #cb9b51 22%, 
        #f6e27a 45%,
        #f6f2c0 50%,
        #f6e27a 55%,
        #cb9b51 78%,
        #462523 100%
    );
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 50% 100%;
    
    -webkit-animation: alan 4s linear infinite;
    -moz-animation: alan 4s linear infinite;
    animation: alan 4s linear infinite;   
}

@-webkit-keyframes alan {
    0%{background-position:100% 0%}
    100%{background-position:0% 100%}
}
@-moz-keyframes alan {
    0%{background-position:100% 0%}
    100%{background-position:0% 100%}
}
@keyframes alan {
    0%{background-position:100% 0%}
    100%{background-position:0% 100%}
}
<div class="alan-wrapper">
  <h1 class="about-alan">
  ALAN
  </h1>
</div>

Upvotes: 2

Related Questions