css - 为什么 Chrome 下载页面上 Chrome 图标的悬停效果不是基于 css3

Question

今天我注意到 Chrome 下载页面上的悬停效果图标 (chrome)。很酷。 我注意到使用css3结合js来实现这个效果，如下代码:

    function maskImg() {
        var requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame,
                startTime = window.mozAnimationStartTime || Date.now();
        var MAX = 138, img = this, maxTime = 1500;
        requestAnimationFrame(function (timestamp) {
            var drawStart = (timestamp || Date.now()),
                    diff = drawStart - startTime;
            img.style.cssText = ['-webkit-mask: -webkit-gradient(radial, 17 17, ' ,
                Math.floor(diff * MAX / maxTime) ,
                ', 17 17, ' ,
                Math.floor(diff * MAX / maxTime) +15,
                ', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));'].join('');
            if (maxTime > diff)requestAnimationFrame(arguments.callee);
        });
    }

我想知道我是否可以使用 webkit-animation 和 @-webkit-keyframes 以及 -webkit-mask 实现相同的目的，但我失败了，因为代码在 link 上。 .
我在问为什么以及如何才能实现这一目标。如果你能告诉我这背后的原因，那就太好了。

我的英语很差，很抱歉。

Answer 1

我不知道是什么让您认为自己失败了。您的动画确实有效:当您将鼠标放在图像上时，您可以在字母“m”上看到“眩光”。

为什么不起作用

您的动画一点也不令人印象深刻的原因是您只定义了 3 个关键帧:

• 在 0%:你永远没有机会看到这个:它设置了一个起点，但是一旦动画开始你就超过了 0%，所以它会移动到下一个关键帧。将其更改为例如5% 会使其可见。
• 在 50%:这是我们可以在字母“m”上观察到的“眩光”(它实际上是您的动画正在运行的唯一视觉指示)。
• at 100%:您在一张只有 123px 宽的图像上将半径设置为 138px，因此我们自然无法观察到任何东西。

如何让它发挥作用

为了让它工作，您需要指定更多关键帧(因为 -webkit-mask-image 属性不在 list of animatable CSS properties ).
因此，使用 CSS 实现这样的动画可能不是一个好主意。想象一下必须为 webkit 浏览器定义 50 个关键帧，为 firefox 定义 50 个，为 IE 定义 50 个，等等。定义较少的关键帧会导致动画不太流畅。
另一方面，您只需在 JavaScript 中为每个浏览器定义1 个函数(而不是 50 个关键帧!)。

---

我准备了一个 short demo ，它在相同的图像上具有 CSS 驱动和 JS 驱动的悬停效果，以展示流畅性和代码行的差异。 (我在 CSS 中定义了 21 个关键帧。另外，由于它只是一个演示，所以我将其设为仅与 webkit 兼容。)

一些数据:

     | keyframes | lines of code
-----+-----------+---------------
 CSS |    21     |     ~150
  JS |    50     |      ~25

可以找到演示的源代码 here .

---

结论

它可以使用 CSS 或 JS 来完成。
但是 JS 更短更流畅!