Question

我试图创建一个带有几个TD的CSS3动画，这些动画会在动画延迟功能稍有变化时重复。我想要一个接一个出现的条纹，延迟时间越来越长。

是否有一种速记方式可以在TD的每次迭代中重复现有代码而无需为每一行创建新的CSS类？

/* Code */
<style>
td[class="animation"]{
        display: block;
        width: 100px;
        height: 5px;
        background-color: #ffffff;
        -webkit-animation-name: example; /* Chrome, Safari, Opera */
        -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
        animation-name: example;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        }
        /* Chrome, Safari, Opera */
        @-webkit-keyframes example {
            0% {background-color: #9A1321;}
            40% {background-color: white;}
            60% {background-color: white;}
            100% {background-color: #232F80;}
        }

        /* Standard syntax */
        @keyframes example {
            0% {background-color: #9A1321;}
            40% {background-color: white;}
            60% {background-color: white;}
            100% {background-color: #232F80;}
</style>

<body>
<table><tr><td class="animation" /></tr></table>
</body>

非常感谢你的帮助！

最佳，

詹姆斯

Answer 1

解决方案可以是CSS类+一些JavaScript代码的组合。

只是在没有你的课程的情况下保留你的TD，然后使用setTimeout（JavaScript），你可以调用一个改变你的TD的类的功能

如何重复CSS3动画，但每次都要更改它

1 个答案: