同步css动画时间（从到）答案

【问题标题】：synch css animation time ( from to )同步css动画时间（从到）
【发布时间】：2014-10-11 14:49:29
【问题描述】：

在这里查看代码^

基本上，我有一个类，我要添加到一个 div 中，该类为背景位置设置动画，创建一个移动的条纹效果（如理发杆）。该类是在单击事件上添加的，因此，背景动画的开始和停止在单击后不久开始。当使用多个 div 时，它们通常不同步。有没有办法确保点击的第二个 div 的动画与点击的第一个 div 的动画同步？

感谢您的宝贵时间！

这里也有代码：

CSS

.selected {

  background: linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  

  background: -webkit-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  

    background: -o-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  


      background: -moz-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  


  animation: barberpole 2s linear infinite;

  -webkit-animation: barberpole 2s linear infinite;

  -moz-animation: barberpole 2s linear infinite;

/* opacity: .9;  */



}

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}


@-webkit-keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}


@-moz-keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}



.pixel {
 width: 100px;
    height: 100px;
    background-color: grey;
float:left;
}

$('.pixel').click(function(){

    $(this).addClass('selected');
});

HTML

<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>

【问题讨论】：

例如，有没有办法将一个元素的背景实时绑定到其他元素的背景上？我可以让一个 div 运行动画，然后所有其他人只引用那个？
我列出的方法你试过了吗？
@ZachSaucier 不幸的是，您的方法只是理论...看看我的答案，以获得实用且经过测试的解决方案；)
@webeno 从什么时候开始回答需要代码？我已经在不同的项目中将这三种方法付诸实践，并且知道它们中的每一种都有效。提供 OP 所需的确切代码远非必需
@ZachSaucier 我不认为我说你的答案必需代码，我只是说它是理论，我是实用的，两者都是事实。然后由社区和 OP 来决定他们更喜欢哪个/最好的... ;)

标签： css animation addclass timing

【解决方案1】：

过去几个小时我一直在尝试这个，我发现这既具有挑战性又很有趣，但我找不到完美的解决方案。

我发现没有办法只跟随之前的动画，所以我需要重置所有 selected 类并将它们添加回来。

我得到这个（有点）工作的方式是使用delay 函数将其设置为与动画相同的时间，不幸的是立即删除和重新添加类并没有相同的效果。

这是我想出的：

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected').delay(2000).queue(function(){
                $(this).addClass('selected').dequeue();
            }); 
        }
    });
    $(this).addClass('selected');
});

这是更新后的小提琴：http://jsfiddle.net/7nm7xpwa/9/

编辑：我找到了！这是上述技巧的完整解决方案（重置动画）。它基本上完全删除元素然后重新添加它，这样重置动画：

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            var elm = this,
                newone = elm.cloneNode(true);
            elm.parentNode.replaceChild(newone, elm);
        }
    });
    $(this).addClass('selected');
});

来源：Restart CSS Animation | CSS-TRICKS

这是新的小提琴：http://jsfiddle.net/7nm7xpwa/10/

编辑#2：在上面关于 CSS-TRICKS 的文章的 cmets 中，我发现了一种更简单的动画重置/元素替换方法，如下所示：

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).replaceWith($(this).clone(true)); // turned this into a 1 liner
        }
    });
    $(this).addClass('selected');
});

你的另一个版本：http://jsfiddle.net/7nm7xpwa/11/

【讨论】：

哇！这是一种非常有趣的处理方式。感谢您投入的时间......我将等到我为这个问题分配一个“赢家”。希望还有其他可能。
这是一个非常好的挑战......如果你能立即弄清楚如何删除和添加一个类，你基本上就完成了！祝你好运！ ;)
抱歉回复晚了（从代码中抽出周末），但这太棒了！也使用了很酷的概念。

【解决方案2】：

您可以采取几种方法。

Fake it - 只需用伪元素或其他东西覆盖原件，然后点击移除覆盖层。唯一的缺点是动画在被覆盖时仍在运行，但如果您只是为几个元素设置动画，这应该不是问题。如果您要为很多元素制作动画，那么您很可能一开始就不应该使用 CSS 动画

等待animationIteration - 检查第一个是否动画，如果是，则在animationIteration 触发时启动另一个。这样做的缺点是在第一次启动后动画之前会有一点延迟

跟踪总动画时间 - 在单击第一个（或之前）时启动计时器，将动画延迟设置为负值，与单击下一个时的当前时间同步。准确地做到这一点是比较困难的。

【讨论】：