CSS3渐变动画

Question

CSS3渐变动画

22

有没有办法使用CSS动画渐变背景？

例如：

@-webkit-keyframes pulse {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  50% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
}

我知道，对于Safari 5.1+和Chrome 10+，有一种新的渐变语法，但现在，我必须使用旧的语法来完成这个项目。

- albuvee

你不能改变 CSS 或者怎么样？ - atlavis

如果我在一个元素上运行这个动画 (-webkit-animation: pulse 1s infinite;)，什么也不会发生。 - albuvee

我认为它不适用于渐变，即使使用新语法也是如此。 - atlavis

我刚刚通过痛苦的教训学到了这个！线性渐变上的转换还不起作用。 - iancrowther

转换可以，但过渡不行，所以您可以至少在IE中对它们进行平移/旋转/扭曲。https://codepen.io/philipphilip/pen/OvXEaV - philip

6个回答

9

将每个渐变变化放在自己的图层上。绝对定位它们。为每个图层提供自己的关键帧集，这些关键帧集彼此同步。在这些关键帧中，使用1和0在关键帧之间混合来定义每个图层的不透明度。

请注意，容器的颜色会渗透，因此用白色背景的父元素包装图层。 http://jsfiddle.net/jSsZn/

- Brian Ephraim

这确实非常聪明，但你需要额外的元素来进行样式设计（对我来说是不可接受的），而且在大多数情况下这是不可能的，因为你只能依靠渐变本身作为元素的背景。但感谢这个创意解决方案，目前看来这似乎是唯一一种动画 - 至少是“假”动画 - 渐变的方法。 - albuvee

这里真是个聪明的解决方案。 - dmackerman

6

我通过对a标签应用:before属性解决了这个问题。

链接: http://codepen.io/azizarslan/pen/xsoje

CSS:

nav ul#menu li a {
    display: block;
    position: relative;
    z-index: 1;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));
}

nav ul#menu li a:before {
    width: 100%;
    height: 100%;
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));

    /* webkit transition */
    -webkit-transition: all 250ms linear;

    /* before hack */
    content: ".";
    text-indent: -99999px;
}

nav ul#menu li a:hover:before {
    opacity: 1;
}

- azizarslan

很好的解决方案。我也在IE 10和11上使其工作了。在IE 9上它是足够好的备选方案（虽然没有平滑过渡，但悬停仍然有效），但如果是IE 8或更早版本，则可能需要兼容性回退。 - RNickMcCandless

1

如果你想要将文本从纯色变为渐变色，只需动画地改变文本的rgba颜色，以显示它所应用的背景渐变色。

CSS:

.button {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,1);

    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.button:hover {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,0);
}

- Angelo Wellens

1

你应该看看css sandpaper-它可以让你实现动态渐变，但这不是一个纯CSS的解决方案。Css sandpaper负责处理渐变的跨浏览器渲染，并且有一段JavaScript代码来处理动画效果。

http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

- Shawson

0

@Brian，不要使用新的HTML元素，而是使用伪元素:before和:after。将主元素定位为相对位置，然后将伪元素定位为绝对位置，上下左右坐标都设为0。

HTML：

<div></div>

CSS：

div {
    width: 200px;
    height: 200px;
    position: relative;
}

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

将关键帧和渐变添加到 div 和伪元素中，使用不透明度。使用 z-index 控制哪个在顶部。

- mindfullsilence

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Mullany · Accepted Answer

目前webkit渐变不支持转换效果。虽然规范中有该特性，但目前还无法使用。

附言：如果只需要颜色转换，您可以尝试使用-webkit-filters进行动画！

更新：据称渐变转换在IE10及以上版本中可行。