渐变动画

Question

我想在一段时间后改变背景。如果背景有一个＆＃34;清除＆＃34;颜色没有问题，但如果颜色是一个渐变设置，因为代码不起作用。是否有解决方法？

background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); /*For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));  /*For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));  /*For Firefox 3.6 to 15 */
background: linear-gradient(rgba(39,49,67,1),rgba(51,90,109,1),rgba(83,142,144,1), rgba(226,228,209,1));  /*Standard syntax */

jsfiddle正常换色

Answer 1

Dbugger说的是真的 - 你不能用css动画为背景图像添加动画效果。

但是，您可以使用4级渐变来伪造它（巧妙地定位颜色停止 - 我建议使用渐变生成器作为Colorzilla或类似 - 将使您的工作更容易） - 因为渐变被视为background-image，您可以使用background-position为其设置动画。为了设置位置的动画，您需要增加它的大小，以便渐变的一部分位于容器之外。

您可以使用animation-delay设置动画开始前的初始延迟。

＆＃13;

html, body {width:100%;height:100%;margin:0;}
div {
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(118,191,36,1) 25%, rgba(224,117,35,1) 50%, rgba(242,38,42,1) 75%, rgba(130,100,70,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(25%,rgba(118,191,36,1)), color-stop(50%,rgba(224,117,35,1)), color-stop(75%,rgba(242,38,42,1)), color-stop(100%,rgba(130,100,70,1)));
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%);   
    background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%);
    background-size: 100% 400%;
    background-position:0 0;
    -webkit-animation: animateGradient 5s ease 1;
    -moz-animation:    animateGradient 5s ease 1;
    animation:         animateGradient 5s ease 1;
    -webkit-animation-delay: 2s;
    -moz-animation-delay:    2s;
    animation-delay:         2s;
}


@-webkit-keyframes animateGradient {
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}
@-moz-keyframes animateGradient {
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}
@keyframes animateGradient { 
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}

＆＃13;

<div></div>

＆＃13;

替代方法：您可以采用的另一种方法是将一个元素叠加到另一个元素上，将初始渐变设置在顶部并在底部元素中结束渐变，然后创建不透明度动画，淡出一段时间后的顶级元素（opacity: 0）

下面介绍如何使用标记中的单个元素（依赖于:after或:before伪元素）。以下方法具有更多兼容性交叉设备：

＆＃13;

html, body {width:100%;height:100%;margin:0;}
.gradient {
    position:relative;    
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));
    background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));
    background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));
    background: linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));
}
.gradient:after {
   content:"";
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: -o-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: -moz-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    opacity: 0;
    -webkit-animation: animateGradient 3s linear 1;
    -moz-animation: animateGradient 3s linear 1;
    animation: animateGradient 3s linear 1;
}

@-webkit-keyframes animateGradient {
    0%   {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes animateGradient {
    0%   {opacity:1;}
    100% {opacity:0;}
}
@keyframes animateGradient {     
    0%   {opacity:1;}
    100% {opacity:0;}
}

＆＃13;

<div class="gradient"></div>

＆＃13;

Answer 2

渐变动画

CSS3不支持线性渐变动画，因此为了达到这个效果，您必须在Javascript中编写自己的动画或使用像Easwee所述的背景位置技巧。我更喜欢Javascript，因为它允许您轻松地重用代码，添加动态效果，并快速修改效果。据说Easwee的解决方案非常巧妙，尽管有些限制。

基于CSS的渐变动画：

即使CSS本身不支持渐变动画，因为Easwee声明我们可以使用“hack”通过操纵图像的背景位置在css中创建渐变动画。

示例（全屏显示）：

body {
  margin: 20px;
  background-color: #000;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 480px;
  height: 140px;
  background-color: #333;
  border-radius: 8px;
}

button {
  position: absolute;
  width: 160px;
  height: 36px;
  top: calc(50% - 18px);
  left: 50px;
  border: solid 1px #ccc;
  border-radius: 8px;
  color: #fff;
  font: 16px sans-serif;
  
  /* set up background gradient and animation */
  background-image: linear-gradient(#5187c4, #1c2f45);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;
}
.container:hover button {
  /* shift background gradient position */
  background-position: 0 0;
}

.slider {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  margin-top: -36px;
  width: 160px;
  height: 72px;
  background-image: linear-gradient(#5187c4, #1c2f45);
  transition: margin-top .5s;
}
.container:hover .slider {
  margin-top: 0px;
}

.frame {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  box-sizing: border-box;
  width: 160px;
  height: 36px;
  border: solid 1px #ccc;
  border-radius: 8px;
}

.info {
  margin: 20px auto 0;
  color: #ccc;
  font: 18px/150% sans-serif;
  text-align: justify;
  width: 480px;
}

<div class="container">
  <button disabled>Some Button</button>
  <div class="slider"></div>
  <div class="frame"></div>
</div>

<div class="info">
  You can't animate gradient colors with pure CSS. Gradients are set via background-image, which is not (currently) an animatable property. But background-position is. So you can use background-size to make the background taller than the element it's on, then animate background-position to slide it up or down. The result is a simple animated fading gradient.
</div>

Code Pen Link

基于Javascript的渐变动画

为了构建基于Javascript的渐变动画，我们需要：

创建一个函数，它接受一个元素，一系列颜色，它们之间的时间延迟，以及一个在函数结束后运行的回调（允许你做一些事情，比如连续重复或直到条件满足）。
使用该功能然后使用每秒触发15次的间隔，并将其当前时间转换为0到100之间的进度值，以确定它与完成的距离。
然后我们将每个匹配的r，g，b的颜色差异乘以进度，以获得我们当前所处的过渡阶段。
我们完成后，我们继续使用下一种颜色。
在所有这些结束时，我们启动回调，然后我们可以决定该做什么。

（如果你想要一个代码解决方案让我知道。这是一个很长的输入过程，所以因为这个原因，如果你只使用一次和两个可能三个渐变颜色使用Eawee的解决方案。否则Javascript的你的朋友。）

Javascript渐变动画的简单示例：

var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{
  
  if ( $===undefined ) return;
  
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('#gradient').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
  }
}

setInterval(updateGradient,10);

	body{
	 background-color: #000000;
   padding: 0px;
   margin: 0px;
 }

#gradient
{
  width: 100%;
  height: 800px;
  padding: 0px;
  margin: 0px;
}

<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="gradient" />
 </body>
</html>

Javascript Based Gradient Animator (Code Pen)

有用的资源：

CSS Gradient Animator Generator

CSS Gradient Animator Walkthrough

Answer 3

背景渐变被视为background-image，背景图像可以 NOT 通过正常的CSS过渡进行动画制作。

Answer 4

您可以尝试LinearGradient.js创建随机且色彩鲜艳的线性渐变。

一段时间后改变线性渐变背景

4 个答案:

渐变动画

基于CSS的渐变动画：

基于Javascript的渐变动画

Javascript渐变动画的简单示例：

有用的资源：