为关键帧动画值分配一个随机数

Question

我正在尝试创建动画背景。简而言之，有 6 个图标都应该以动画形式在页面内小范围内移动。

当前的 JS Fiddle 在一定程度上可以工作，但需要进行如下修改：

https://jsfiddle.net/mLegg2vt/7/

我希望随机生成这些图标的移动，以便它们在以下范围内上下浮动：

x axis = 1px to 5px
y axis = 13px to 20px

我已经设法使用硬编码值获得了解决方案，但现在我认为我走错路了，因为它需要为每个图标创建多个关键帧动画具有不同的价值。我不一定反对这一点，但我不确定如何实现它。

我使用以下方法为上述范围内的每个图标生成了随机数：

var x = randomInt(5, 1); // use this value for x in translate3d
var y = randomInt(20, 13); // use this value for y in translate3d

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

但是，我现在需要使用上面创建的值为这个特定图标创建一个关键帧动画。目前我的硬编码关键帧动画用于所有图标，看起来像这样：

@keyframes gentleHover {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    50% {
        transform: translate3d(5px, 15px, 0px);
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

在上面，我希望用我的值填充 50% 的关键帧，例如：

50% {
    transform: translate3d(xpx, ypx, 0px);
}

现在我的问题是如何在 jQuery 中为每个图标执行此操作？如何为这 6 个图标中的每一个创建一个 CSS 关键帧，并使用值？我了解如何使用 .css() 将 CSS 添加到特定元素，但现在如何在样式表中创建全新的 CSS。我知道我需要将生成的关键帧动画添加到这个元素上，但这很简单：

$(this).css('animation', '[theCreatedKeyframeHere] 5s linear infinite');

我能想到的唯一方法是将包裹在<style> 标签内的关键帧放入样式表中。但这是推荐的吗？

同样重要的是要注意上面的所有 jQuery 都包含在一个 site.js 文件中，该文件通过标头调用。它不在页面上的<script> 标签中。

Answer 1

最后，我接受了使用jQuery.Keyframes 的建议，它允许我在jQuery 中设置关键帧动画。最终，它与我自己的解决方案非常相似，因为它将关键帧附加到 head，但它有一些额外的帮助程序，使其更容易，所以值得一试。

然后我能够生成我的随机数并将它们分配给 jQuery 中的each 图标：

$.keyframe.define([{
            name: 'gentleHover'+iconCounter,
            '0%': {'transform': 'translate3D(0px,0px,0px)'},
            '20%': {'transform': 'translate3D('+randomInt(40, -40)+'px,'+randomInt(40, -40)+'px,0px)'},
            '40%': {'transform': 'translate3D('+randomInt(40, -40)+'px,'+randomInt(40, -40)+'px,0px)'},
            '60%': {'transform': 'translate3D(0px,0px,0px)'},
            '80%': {'transform': 'translate3D('+randomInt(40, -40)+'px,'+randomInt(40, -40)+'px,0px)'},
            '100%': {'transform': 'translate3D(0px,0px,0px)'}
        }]);

为了制作多个版本，因此它们并不完全相同，我使用了iconCounter，它为每个icon 创建了一个新的关键帧动画。我现在有与每个图标相关的gentleHover1 等。结果是图标在随机方向浮动，完全不同。

作为一种继续前进的方式，将随机数添加到秒计时器也很酷。目前，所有图标都是 30 年代。但是将每个图标设置在 20 到 40 秒之间会使一些图标移动得更快，并且每个图标的间隔不同。