Gradient Animation CSS

Asked

Viewed 76 times

1

I’m trying to make an animation like this link: https://codepen.io/TheCodeDepository/pen/jKBaoN

It turns out, the code below (which I copied line by line) is with some problem that does not allow animation to start:

section {
    width: 100%;
    height: 100vh;
    background-size: 400% 400%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: mygradient 2s ease infinite;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2em;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    font-family: 'Lato';
    border: 1px solid #fff;
    transform: translate(-50%, -50%);
    padding: 20px;
}

@keyframes mygradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
<body>
    <section>
        <h1>Meu código</h1>
    </section>
</body>

Already the code below (copied from the link initially informed) works perfectly. (NOTE: I removed some lines from the original code for finding them unnecessary. So much so that the code works without them).

section {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2em;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    font-family: 'Lato';
    border: 1px solid #fff;
    transform: translate(-50%, -50%);
    padding: 20px;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
<body>
    <section>
        <h1>Código Original</h1>
    </section>
</body>

As I have been for hours comparing my code that does not work with what works and trying to understand what is wrong, but without result, I decided to ask for help from someone who can help me. I am grateful right now for any response!

html5 css3 css-animations

2 answers

1

I honestly don’t know what it is that your code doesn’t work. But I copied the "working" code you posted and replaced the colors #ee7752, #e73c7e, #23a6d5, #23d5ab on it. It also replaces H1 {} and the Animate kept the same, because it is equal.

I compared both codes and saw no difference that could affect the functioning. Maybe someone else can find, but at first I found nothing. I compared using the site codebeautify.org

section {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: Gradient 2s ease infinite;
}

h1 {
position: absolute;
top: 50%;
left: 50%;
font-size: 2em;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
color: #fff;
font-family: 'Lato';
border: 1px solid #fff;
transform: translate(-50%, -50%);
padding: 20px;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
<body>
    <section>
        <h1>Código Original</h1>
    </section>
</body>

  • 1

    If you pass the background-size: 400% 400%; to the top line of the background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); namely that the background-size come before the shorthand background the animation fails, because the background-size: 400% 400%; shall cease to apply if it comes before the background

  • 2

    True. I had not attempted it. I even considered it, but I did not believe it would cause such a problem. It is an experience to test all alternatives. Thank you.

1


Your problem is that you only used the shorthand of background to the gradient, and should be background-image

Notice where it was

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

Now is

background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

When you use the shorthand after (below) some other attribute of background, as in the case of background-size, it ends up with the default value that is 100%, then the effect does not work, because the background-size should be 400%

OBS: If you reverse the order and first use the shorthand background: gradiente and below it the background-size tb of right, for the same reason explained above!

section {
    width: 100%;
    height: 100vh;
    background-size: 400% 400%;
    background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: mygradient 2s ease infinite;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2em;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    font-family: 'Lato';
    border: 1px solid #fff;
    transform: translate(-50%, -50%);
    padding: 20px;
}

@keyframes mygradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
<body>
    <section>
        <h1>Meu código</h1>
    </section>
</body>

  • 1

    Thank you very much! I had no idea that the order of the attributes in this context would influence such a result of the code.

  • 1

    @Ricardopassos this is a very particular case, because you used the property in shorthand format background, after the background-size objective property, ai the shorthand "zeroed" to another property...

Browser other questions tagged html5 css3 css-animations

You are not signed in. Login or sign up in order to post.