CSS3 animation动画中途停顿延迟_animation延迟-CSDN博客

本文链接：https://blog.csdn.net/best_inh/article/details/126541100

本文介绍了一种使用CSS3实现动画中途停顿的方法，通过关键帧动画的不同百分比处设置相同的样式达到停顿效果。示例代码展示了如何制作带有节奏性停留的滚动字幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 animation动画中的animation-delay属性是指动画开始之前的延迟，如何实现动画中途停顿或延迟呢，可以用进程进行控制。

比如，最近做了一个连续滚动的字幕，要求中途有有节奏性的短暂停留或延迟。之前一直考虑用JS实现；但用CSS3实现则更妙。话不多说，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 animation动画中途停顿延迟</title>
</head>
<body>
<style>
#box {
	display:inline-block;
	*display:inline;
	*zoom:1;
	height:34px;
	line-height:34px;
	overflow:hidden;
	background-color:#FFFF66;
}
#box a {
	height:34px;
	white-space:nowrap;
	display:block;
	animation:rowup 6s ease 3s infinite;
	-webkit-animation:rowup 6s ease 3s infinite;
}
@-webkit-keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
    }
	10% {
		-webkit-transform: translate3d(0, -34px, 0);
		transform: translate3d(0, -34px, 0);
    }
	50% {
		-webkit-transform: translate3d(0, -34px, 0);
		transform: translate3d(0, -34px, 0);
    }
    60% {
		-webkit-transform: translate3d(0, -68px, 0);
		transform: translate3d(0, -68px, 0);
	}
    100% {
		-webkit-transform: translate3d(0, -68px, 0);
		transform: translate3d(0, -68px, 0);
	}
}
@-moz-keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
    }
	10% {
		-webkit-transform: translate3d(0, -34px, 0);
		transform: translate3d(0, -34px, 0);
    }
	50% {
		-webkit-transform: translate3d(0, -34px, 0);
		transform: translate3d(0, -34px, 0);
    }
    60% {
		-webkit-transform: translate3d(0, -68px, 0);
		transform: translate3d(0, -68px, 0);
	}
    100% {
		-webkit-transform: translate3d(0, -68px, 0);
		transform: translate3d(0, -68px, 0);
	}
}
@keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
    }
	10% {
		-webkit-transform: translate3d(0, -34px, 0);
		transform: translate3d(0, -34px, 0);
    }
	50% {
		-webkit-transform: translate3d(0, -34px, 0);
		transform: translate3d(0, -34px, 0);
    }
    60% {
		-webkit-transform: translate3d(0, -68px, 0);
		transform: translate3d(0, -68px, 0);
	}
    100% {
		-webkit-transform: translate3d(0, -68px, 0);
		transform: translate3d(0, -68px, 0);
	}
}
</style>

<span id="box"><a href="#">开业酬宾，好礼多多</a><a href="#">走过路过，不要错过</a><a href="#">开业酬宾，好礼多多</a><a href="#">走过路过，不要错过</a></span>
</body>
</html>