按时添加和删除关键帧

Question

我的关键帧有 3 个移动对象：

  @keyframes rotation {
        0% {
            transform: rotateY(0deg)
        }
        10% {
            transform: rotateY(55deg)
        }
        30% {
            transform: rotateY(55deg)
        }
        60% {
            transform: rotateY(230deg)
        }
        80% {
            transform: rotateY(230deg)
        }
        100% {
            transform: rotateY(360deg)
        }
    }

这会移动我的对象 ->

css:

.object{
    position: relative;
    margin: auto;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
    -moz-transition: -moz-transform 2s linear;
    -moz-transform-style: preserve-3d;
    transition: transform 2s linear;
    transform-style: preserve-3d;
    transform: rotateY(230deg);
}


.cb2 {
    animation: rotation 20s infinite linear;
}

现在我希望第一个对象旋转一次，然后当它完成时第二个应该旋转，当第二个完成时第三个应该旋转。

我试过这样的事情：

setTimeout(function() {
    $("#first").addClass('cb2');
}, 10000);
setTimeout(function() {
    $("#first").removeClass('cb2');
}, 16500);
setTimeout(function() {
    $("#second").addClass('cb2');
}, 16600);
setTimeout(function() {
    $("#second").removeClass('cb2');
}, 29900);
setTimeout(function() {
    $("#third").addClass('cb2');
}, 30100);

首先，这并没有真正奏效，因为它不是很流畅，但主要问题是，这将完成一次工作，但我想循环执行此操作。这可能吗？

HTML:

  <div id="container">
        <div id="thrdcb" class="position-absolute displayres" style="top:100px;left: 10%;bottom:0;pointer-events: none;">
            <div class="container">
                <div class="row mt-5">
                    <div class="col">
                        <div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
                            <div class="navbar"></div>
                            <div class="news-grid">
                                <div class="news-card">
                                    <div id="firstcube" class="object">
                                        <div class="face one">
                                            <p id="firstnewssub" style="position: relative; background-color: #a3ba1e; padding: 10px;">

                                            </p>
                                        </div>
                                        <div class="face two">
                                            <p id="firstnewssub2" style="position: relative; background-color: #a3ba1e; padding: 10px;">

                                            </p>
                                        </div>
                                        <div class="face three">
                                            <img src="data/img/testasdd.png" alt="" />
                                            <p id="aaaae" style="position: relative; background-color: #a3ba1e; padding: 10px;">
                                            </p>
                                        </div>
                                        <div class="face four">
                                            <img src="data/img/asddfff.png" alt="" />
                                            <p id="firstnews2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
                                            </p>

                                        </div>
                                    </div>
                                    <a id="rrzuii" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1"
                                        data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="asdz7">

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="scndcb" class="position-absolute displayres" style="top:100px;right: 10%;bottom:0;pointer-events: none;">
            <div class="container">
                <div class="row mt-5">
                    <div class="col">
                        <div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
                            <div class="news-grid">
                                <div class="news-card">
                                    <div id="thirdcube" class="object">
                                        <div class="face one">
                                            <p id="lppzz" style="position: relative; background-color: #62798b; padding: 10px;">

                                            </p>
                                        </div>
                                        <div class="face two">
                                            <p id="iottt" style="position: relative; background-color: #62798b; padding: 10px;">

                                            </p>
                                        </div>
                                        <div class="face three">
                                            <img src="data/img/asdaqqqqq.png" alt="" />
                                            <p id="thirdnews1" style="position: relative; background-color: #62798b; padding: 10px;">
                                            </p>
                                        </div>
                                        <div class="face four">
                                            <img src="data/img/uthhase.png" alt="" />
                                            <p id="thirdnews2" style="position: relative; background-color: #62798b; padding: 10px;">
                                            </p>

                                        </div>
                                    </div>
                                    <a id="aaklptt" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1" data-names="opacity, pointer-events"
                                        data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="-blue">

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="cubepointer" class="position-absolute displayres" style="top: 100px; left: 20%; right: 20%; bottom: 0px;pointer-events: none;">
            <div class="container">
                <div class="row mt-5">
                    <div class="col">
                        <div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
                            <div class="news-grid">
                                <div class="news-card">
                                    <div id="secondcube" class="object">
                                        <div class="face one">
                                            <p id="dghh" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>
                                        </div>
                                        <div class="face two">
                                            <p id="aas" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>
                                        </div>
                                        <div class="face three">
                                            <img src="data/img/adasd.png" alt="" />
                                            <p id="ffss" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>
                                        </div>
                                        <div class="face four">
                                            <img src="data/img/testm.png" alt="" />
                                            <p id="zz" style="position: relative; background-color: #e07a0c; padding: 10px;">

                                            </p>

                                        </div>
                                    </div>
                                    <a id="rdda" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="99" data-chapter="1" data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all"
                                        data-delay="9999" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="font-weight font">

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

虽然理论上可以在 CSS 中执行此操作，但使用一组关键帧和 animation-delay CSS 属性，计时可能会正如评论中指出的那样，步调不一致（例如，取决于系统处理其他事情的繁忙程度）。

因此，此代码段将动画设置为在第一个对象上进行一个循环，侦听动画何时结束，移除动画并将其放到下一个对象上，依此类推。这样就可以保证按顺序保持同步，即使事情有时会有点延迟。

const objects = document.querySelectorAll('.objects > *');
const num = objects.length;
let n = 0;
objects.forEach(object => {
  object.addEventListener('animationend', function() {
    object.classList.remove('cb2');
    n = (n + 1) % num;
    objects[n].classList.add('cb2');
  });
});
objects[n].classList.add('cb2');

@keyframes rotation {
  0% {
    transform: rotateY(0deg)
  }
  10% {
    transform: rotateY(55deg)
  }
  30% {
    transform: rotateY(55deg)
  }
  60% {
    transform: rotateY(230deg)
  }
  80% {
    transform: rotateY(230deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.objects>* {
  position: relative;
  margin: auto;
  height: 300px;
  width: 300px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateY(230deg);
}

.objects>*:nth-child(1) {
  background: cyan;
}

.objects>*:nth-child(2) {
  background: magenta;
}

.objects>*:nth-child(3) {
  background: yellow;
}

.cb2 {
  animation: rotation 20s 1 linear;
}

<div class="objects">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

你可以利用动画事件。在您的情况下，动画定义为 animation: rotation 20s infinite linear;，因此要停止动画并开始下一个动画，您需要查找 animationiteration 事件。

我为事件侦听器将元素包装在 <div> 中。同时，此包装器可用于查找下一个要设置动画的元素。

const container = document.getElementById('container');

//container.addEventListener('animationend', e => {
container.addEventListener('animationiteration', e => {
  $(e.target).removeClass('cb2');
  let next = e.target.parentElement.querySelector(`div#${e.target.id}~div.object`);
  if(next){
    $(next).addClass('cb2');
  }else{
    $(e.target.parentElement.querySelector(`div.object`)).addClass('cb2');
  }
});

// initiate animation
$(container.querySelector(`div.object`)).addClass('cb2');

@keyframes rotation {
  0% {
    transform: rotateY(0deg)
  }
  10% {
    transform: rotateY(55deg)
  }
  30% {
    transform: rotateY(55deg)
  }
  60% {
    transform: rotateY(230deg)
  }
  80% {
    transform: rotateY(230deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.object {
  position: relative;
  margin: auto;
  height: 100px;
  width: 100px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateY(230deg);
}

.cb2 {
  animation: rotation 20s infinite linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="first" class="object">A</div>
  <div id="second" class="object">B</div>
  <div id="third" class="object">C</div>
</div>

更新

第一个示例假定所有 div.object 元素都是兄弟。以下示例显示了 div.object 元素如何位于嵌套结构中。在这种情况下，需要一个变量 objects 来保存所有 div.object。下一个元素的选择基于数组中当前元素的索引。

const container = document.getElementById('container');

const objects = container.querySelectorAll('.object');

container.addEventListener('animationiteration', e => {
  $(e.target).removeClass('cb2');
  let currentIndex = [...objects].indexOf(e.target);
  let next = objects[currentIndex+1];
  if(next){
    $(next).addClass('cb2');
  }else{
    $(objects[0]).addClass('cb2');
  }
});

// initiate animation
$(objects[0]).addClass('cb2');

@keyframes rotation {
  0% {
    transform: rotateY(0deg)
  }
  10% {
    transform: rotateY(55deg)
  }
  30% {
    transform: rotateY(55deg)
  }
  60% {
    transform: rotateY(230deg)
  }
  80% {
    transform: rotateY(230deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.object {
  position: relative;
  margin: auto;
  height: 100px;
  width: 100px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform: rotateY(230deg);
}

.cb2 {
  animation: rotation 20s infinite linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div>
    <div id="first" class="object">A</div>
  </div>
  <div>
    <div id="second" class="object">B</div>
  </div>
  <div>
    <div id="third" class="object">C</div>
  </div>
</div>

按时添加和删除关键帧

Add and Remove Keyframe on time

html

javascript

css

更新