Cómo animar degradados usando CSS

Question 1

Quiero mover mi degradado que tiene varios colores sin problemas, pero el problema es que la animación no es fluida. Simplemente cambia su posición a cada paso.

<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>

¿Es posible lograrlo sin usar jQuery?

Mi enlace jsfiddle es https://jsfiddle.net/bAUK6

Question 2

Por favor, prueba este código:

#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>

Question 3

Implementación dinámica de la respuesta de Dave:

:root{
    --overlay-color-1: #ff0000;
    --overlay-color-2: #0000ff;
    --anim-duration: 2s;
}

#gradient {
    opacity: 0.8;
    background: none;
}

#gradient:after,
#gradient:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

#gradient:before {
    background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate;
}

#gradient:after {
    background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate;
}

@keyframes OpacityAnim {
    0%{opacity: 1.0}
    100%{opacity: 0.0}
}

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

Question 4

Usar variables CSS ahora es una tarea trivial.

Aquí hay un ejemplo básico (pase el cursor para ver el resultado)

@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c{
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.box {
  /*  needed for firefox to have a valid output */
  --a:80deg;
  --l:10%;
  --c:red;
  /**/
  cursor:pointer;
  height:200px;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
  background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
}
.box:hover {
  --a:360deg;
  --l:40%;
  --c:green;
}

<div class="box"></div>

Más detalles aquí: https://dev.to/afif/podemos-finalmente-animar-css-gradient-kdk

Question 5

Qué tal esto:

Establezca el margen del cuerpo y el relleno en 0. Establezca una regla html en una altura del 100 % (es posible que se requiera una altura superior al 100 %).

Establezca el cuerpo en el estado final del degradado.

Cree un div vacío con un fondo que sea el estado de inicio del degradado. Dale al div vacío 100% de altura.

Dale tanto al cuerpo como al div vacío un archivo adjunto de fondo: fijo;

Cree un envoltorio para el contenido de su cuerpo.

Establezca el div vacío en la posición: fijo; Establezca el envoltorio en la posición: relativo; Proporcione a ambos un índice z, siendo el envoltorio más alto.

Cree una animación que cambie la opacidad del div vacío de 1 a 0 durante el tiempo deseado. Agregar modo de relleno de animación: adelante; a la regla div para que la animación permanezca donde termina.

No es tan sexy como un cambio de gradiente animado real, pero creo que es tan simple como se puede obtener solo con CSS y fotogramas clave.

Question 6

Aquí hay otra manera. Lo siguiente tiene el degradado estático que contiene todas las fases de la animación, que luego se mueve dentro del elemento externo. Esto permite realizar la animación sin problemas (como sugiere el tema), porque la única animación aquí es la posición del elemento.

Tenga en cuenta que, por motivos de rendimiento, el elemento degradado no se modificó. Aunque la cuestión era animar el degradado, mover el fondo hace prácticamente lo mismo, ¡mientras que gana el rendimiento!

.animated {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border: 1px solid black;
}
.innerGradient {
    z-index: -1;
    width: 300%;
    height: 300%;
    position: absolute;
    animation: gra 5s infinite;
    -webkit-animation: gra 5s infinite;
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
    background: -webkit-linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
}
@keyframes gra {
    0% { left: -200%; top: -200%; }
    50% { left: 0%; top: 0%; }
    100% { left: -200%; top: -200%; }
}

<div class="animated">
    <h1>Hello</h1>
    <div class="innerGradient"></div>
</div>

¿Ha sido útil esta solución?