SVG动画示例

		<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-540 -900 1080 1800"
			style="display: block; margin: 0 auto; max-width: none !important;" width="100%">
			<g>
				<!------------------------ 【倒计时停止】 ------------------------>
				<g data-author="懂点君·梦幻雪冰">
					<foreignObject x="-540" y="-900" width="1080" height="1800"> <svg height="1800"
							style="display: block; background-image: url(https://images.weserv.nl/?url=https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbibfOvzl8Vmg2xCibicnpDbKicDLu0PbrI9t1a5BqsGKrnDfWvvPdlwggYg/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;"
							width="1080" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject>
				</g>
				<g>
					<!------------------------ 【倒计时数字4】 ------------------------>
					<g data-author="懂点君·梦幻雪冰">
						<foreignObject x="-540" y="-900" width="1080" height="1800"> <svg height="1800"
								style="display: block; background-image: url(https://images.weserv.nl/?url=https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbjqzI3SAAW5GQukHl0HuZP2Lzvg1rlPqTCjouh2KEW9grbVkGuwlQhQ/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;"
								width="1080" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject>
						<animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
							restart="never" begin="1.8s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s"
							type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
						<animate attributeName="opacity" restart="never" begin="2.0s" dur="0.4s" values="1; 0;"
							keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
						<!------------------------ 【倒计时数字3】 ------------------------>
						<g data-author="懂点君·梦幻雪冰">
							<foreignObject x="-540" y="-900" width="1080" height="1800"> <svg height="1800"
									style="display: block; background-image: url(https://images.weserv.nl/?url=https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbqslMfFH9FrT1lODWRBbjxhNT6B4SXhnu09NC8JziaHkIfxLxFoia4BcA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;"
									width="1080" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject>
							<animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
								restart="never" begin="1.2s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s"
								type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
							<animate attributeName="opacity" restart="never" begin="1.4s" dur="0.4s" values="1; 0;"
								keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
							<!------------------------ 【倒计时数字2】 ------------------------>
							<g data-author="懂点君·梦幻雪冰">
								<foreignObject x="-540" y="-900" width="1080" height="1800"> <svg height="1800"
										style="display: block; background-image: url(https://images.weserv.nl/?url=https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbrPxZDRRI785uc2nm4DARicBgDXWCFrAE1SzMCWTI6SOEgZS4WFrnb4A/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;"
										width="1080" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject>
								<animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
									restart="never" begin="0.6s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s"
									type="scale" attributeName="transform" fill="freeze" additive="sum">
								</animateTransform>
								<animate attributeName="opacity" restart="never" begin="0.8s" dur="0.4s" values="1; 0;"
									keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
								<!------------------------ 【倒计时数字1】 ---------------------->
								<g data-author="懂点君·梦幻雪冰">
									<foreignObject x="-540" y="-900" width="1080" height="1800"> <svg height="1800"
											style="display: block; background-image: url(https://images.weserv.nl/?url=https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbqP026KVp9XZiaLFv1k0wnJKA8DIzibpjOqVC75TRpNrfRy81xpY5wXxA/0?wx_fmt=png); background-color: #000; background-size: 100% auto; background-repeat: no-repeat;"
											width="1080" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject>
									<!-- 缩放 -->
									<animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
										keyTimes="0; 0.3; 1" restart="never" begin="0s" values="1; 0.90; 1.5;"
										dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum">
									</animateTransform> <!-- 透明度 -->
									<animate attributeName="opacity" restart="never" begin="0.2s" dur="0.4s"
										values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
								</g>
							</g>
						</g>
					</g>
				</g>
			</g>
		</svg>

代码注释：
calcMode：该属性指定动画的插值模式。默认模式是线性的。
additive：此属性规定是否将当前动画结束的状态作为下一次动画的起始状态 。
restart：此属性指示何时动画可以或不能重新启动。
fill：属性fill="freeze"时，动画终止时，发生变化的元素属性值停留在动画终止时的状态；当fill="remove"时，动画终止时，发生变化的元素属性值回复到动画起始时的状态。fill属性默认值为remove。

来源
公众号图文『SVG倒计时动效』模板代码