Question

我有一个生成20个随机大小的div元素的页面，并将它们放在div容器中的随机位置。使用CSS @keyframe动画我可以为每个元素应用一个非常简单的缩放和颜色动画。

我想将animation-duration CSS属性设置为每个元素的随机数。我尝试使用jQuery.css方法这样做;

element.css({ 'animation-duration': animationTime, 'animation-delay': animationTime });

但这不起作用。

有什么建议吗？

完整代码如下 - 例如http://codepen.io/CronanGogarty/pen/ZOexMN

.animationContainer {
        width: 100%;
        min-height: 400px;
        height: 100%;
        border: 1px solid #000;
        overflow:hidden;
    }

    .animationElement {
        position: absolute;
        background-color: yellow;
        animation: increase infinite;
        animation-direction: alternate;
    }

    @keyframes increase {
        0% {
            border-radius: 100%;
        }

        50% {
            background-color: orange;
        }

        100% {
            transform: scale(2);
            background-color: red;
        }
    }

$(function () {
        createRandomElements();
    });

    function createRandomElements() {
        for (var i = 0; i < 20; i++) {
            var dimensions = Math.floor(Math.random() * (60 - 10) + 10);
            var width = $('.animationContainer').width();
            var height = $('.animationContainer').height();

            var eltop = Math.floor(Math.random() * (height - dimensions) + dimensions);
            var elleft = Math.floor(Math.random() * (width - dimensions) + dimensions);

            var animationTime = Math.floor(Math.random() * (5 - 2 + 1)) + 2;

            var element = $('<div>', {
                class: 'animationElement',
                width: dimensions,
                height: dimensions
            });
            element.css({ 'animation-duration': animationTime, 'animation-delay': animationTime });
            element.offset({ top: eltop, left: elleft });
            $('.animationContainer').prepend(element);
        }
    }

作为一个额外的问题 - 任何人都可以解释为什么overflow:hidden属性不能处理.animationContainer元素吗？我怀疑它是因为.animationElement div被放在容器之前 - 如果有人有解决方案，我会非常感激。

Answer 1

animation-delay和animation-time需要与单位相关联。使用以下命令为值添加s（秒）。这使得css有效。

element.css({
  'animation-duration': animationTime + 's',
  'animation-delay': animationTime + 's'
});

作为奖励，如果您希望隐藏绝对定位的孩子，则需要将动画容器设置为position: relative。

Here's a fork of your pen with the changes

Answer 2

我通过向该元素添加overflow:hidden解决了position:relative问题。

使用jQuery将随机值应用于animation-duration

2 个答案: