要实现在网页中播放动画多次,可以使用JavaScript来控制动画的播放次数。下面是一个示例代码,演示如何使用JavaScript来播放动画多次:
HTML代码:
CSS代码:
#animation {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 1s infinite;
}
@keyframes myAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
JavaScript代码:
function playAnimation() {
var animationDiv = document.getElementById("animation");
animationDiv.style.animationIterationCount = "2"; // 设置动画播放次数为2次
}
上述示例中,当点击“播放动画”按钮时,会调用playAnimation()
函数。该函数通过获取animation
元素的引用,然后设置animationIterationCount
属性为2,即可将动画播放次数设置为2次。
注意,animationIterationCount
属性的默认值为"1",设置为"infinite"表示无限次播放。你可以根据需要修改这个值来控制动画的播放次数。