Animating Linear Gradient using CSS

问题

I want to move my gradient that has multiple colors smoothly but the problem is that the animation is not smooth it just changes its position at every step.

here is

<style>
.animated {
    width:300px;
    height:300px;
    border:1px solid black;
    animation:gra 5s infinite;
    animation-direction:reverse;
    -webkit-animation:gra 5s infinite;
    -webkit-animation-direction:reverse;

    animation-timing-function:linear;
    -webkit-animation-timing-function:linear;
}
@keyframes gra {
    0% {
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
    }
    50% {
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
    }
    100% {
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
    }
}  
</style>
<div class="animated">
     <h1>Hello</h1>

</div>

Is it possible to accomplish without using jquery.

My jsfiddle link is http://jsfiddle.net/bAUK6

回答1:

Please try this code:

#gradient
{
    height:300px;
    width:300px;
    border:1px solid black;
    font-size:30px;
    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
    background-size: 200% 200%;

    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}

<html>
<div id="gradient">
  Hello
</div>
</html>

回答2:

Sadly, you cannot animate between gradients like this in CSS.

There are plenty of workarounds of course, this one being the most elegant as it's just using CSS.

来源：https://stackoverflow.com/questions/23441060/animating-linear-gradient-using-css

标签

html

css

animation

gradient