时间戳

首页 > 解决方案 > 如何让动画播放后有一些延迟时间？

css - 如何让动画播放后有一些延迟时间？

问题描述

我制作了一个无限价值的射击开始动画。我接下来想要的是在动画播放后，它有 10 秒的延迟并再次启动动画。但是由于我在动画代码中设置了一个无限值，所以它没有中断时间，并且在动画结束时立即开始。

如何在重新开始之前将其更改为有休息时间？

#shooting_star { position: absolute;
                 height: 1px;
                 background: linear-gradient(-45deg, rgb(177 177 177), rgb(27 27 27));
                 width: 146px;
                 top: -25%;
                 left: 63%;
                 animation:shootingw 2s ease-in-out infinite,
                           shootingr 2s ease-in-out infinite;
                 transform: rotate(90deg);}
                           
@keyframes shootingw {
    0% {
        width:0;
    }
    30% {
        width:146px;
    }
    100% {
        width:0;
    }
}

@keyframes shootingr {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(300px);
    }
}

标签： css

解决方案

转换现有关键帧以添加延迟

这可能是一种替代实施方式。扩展关键帧集的最后一个状态可以模拟每次动画迭代后的延迟。在此示例中，我使用 adiv进行测试。如果您愿意使用 JavaScript，则可能有一种方法可以引入延迟，但我发现这非常优雅，因为无论如何动画都会重复出现。

2s/(2s + 10s 延迟) = 2s/12s = 1/6

您可以通过将百分比乘以大约 1/6，然后在 100% 处添加最后一个状态来转换现有动画关键帧。

#shooting_star{ 
position: absolute;

/*Changed for viewing purposes*/
top: 20%;
left: 20%;


height: 1px;
background: linear-gradient(-45deg,rgb(177,177,177),rgb(27,27,27));
width: 146px;

animation:shootingw 12s ease-in-out infinite,
shootingr 12s ease-in-out infinite;
transform: rotate(90deg);
}
                           
@keyframes shootingw {
    0%{width:0;}
    5%{width:146px;}
    16%{width:0;}
    100%{width:0;}
}

@keyframes shootingr {
    0%{transform: translateX(0);}
    16%{transform: translateX(300px);}
    100%{transform: translateX(300px);}
}
<div id = "shooting_star"></div>

推荐阅读