[CSS]-11-动画效果

引言

"动画效果"是css3新增加的功能,利用它能够完成很多令人惊艳的动态效果。

文章目录

0×1.百分比动画

请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>百分比动画实例</title>

						<style type="text/css">
							#d1{
								width: 250px;
								height: 50px;
								text-align: center;
								line-height: 50px;
								<!--导入这个动画,divanimation是自定义的动画名称-->
								animation-name: divanimation;
								<!--整个动画加载时间-->
								animation-duration: 10s;
								<!--为了让大家在加载完成本页面后能够看到后面的动画效果,下面这条语句的意思是,重复播放,如果只想播放几次后停止,可以使用具体数字替换infinite值-->
								animation-iteration-count:infinite;
							}

							<!--整个动画流程,可以使用百分比细分每一个动作,这些动作将在调用它的标签所设定的时间内执行完成-->
							@keyframes divanimation{
								0%{
									margin-left: 5px;
									border:5px dotted yellow;
									background-color: purple;
								}
								30%{
									margin-left: 15px;
									border:5px dashed pink;
									background-color: blue;
								}
								50%{
									margin-left: 25px;
									border:5px double red;
									background-color: white;
									color: black;
								}
								70%{
									margin-left: 35px;
									border:5px solid orange;
									background-color: gray;
									color: gold;
								}
								100%{
									border:5px solid white;
									background-color: green;
									color: white;
								}
							}
						</style>
					</head>
					<body>
						<div id="d1">
							www.qingsword.com
						</div>
					</body>
					</html>
					

显示效果:

www.qingsword.com

0×2.起点与终点动画

百分比动画能够细分每个片段的效果,而"起点与终点动画"相当于,仅存在一个0%与100%的百分比动画,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>起点终点动画实例</title>

						<style type="text/css">
							#d1{
								width: 250px;
								height: 50px;
								text-align: center;
								line-height: 50px;
								animation-name: divanimation;
								animation-duration: 5s;
								animation-iteration-count:infinite;
							}

							@keyframes divanimation{
								from{ <!--起点-->
									margin-left: 5px;
									border:5px dotted yellow;
									background-color: purple;
								}
								to{ <!--终点-->
									margin-left: 40px;
									border:5px double white;
									background-color: green;
									color: white;
								}
							}
						</style>
					</head>
					<body>
						<div id="d1">
							www.qingsword.com
						</div>
					</body>
					</html>
					

显示效果:

www.qingsword.com

0×3.缓动速度与延迟

"缓动速度"与前面一篇文章中的"过度速率"的概念是一样的,并且他们也具有相同的速度值,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>缓动速度与延迟动画实例</title>

						<style type="text/css">
							#d1{
								width: 250px;
								height: 50px;
								text-align: center;
								line-height: 50px;
								border:2px solid gold;
								animation-name: divanimation;
								animation-duration: 5s;
								animation-iteration-count:infinite;
								<!--设置div的移动速度由慢到快-->
								animation-timing-function: ease-in;
								<!--设置延迟十秒后再开始执行动画效果,因为上面设置了重复播放,而延迟只是在页面刚加载时执行一次,所以大家看到这里的时候,动画已经开始执行并且循环了很多次了,如果想看到这个延迟效果,请刷新后在10秒内定位到下面的显示区-->
								animation-delay: 10s;
							}

							@keyframes divanimation{
								from{
									margin-left: 5px;
									border:5px dotted yellow;
									background-color: purple;
								}
								to{
									margin-left: 40px;
									border:5px double white;
									background-color: green;
									color: white;
								}
							}
						</style>
					</head>
					<body>
						<div id="d1">
							www.qingsword.com
						</div>
					</body>
					</html>
					

显示效果:

www.qingsword.com

0×4.重复播放与交替

重复播放上面已经演示过了,下面来演示一下交替播放设置,我们看到上面的播放模式都是动画到达100%后直接返回0%,但如果设置了交替属性,那么到达100%后将从100%处往回播放直至0%,就像倒带功能一样,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>交替动画实例</title>

						<style type="text/css">
							#d1{
								width: 250px;
								height: 50px;
								text-align: center;
								line-height: 50px;
								animation-name: divanimation;
								animation-duration: 5s;
								animation-iteration-count:infinite;
								<!--设置交替播放属性-->
								animation-direction: alternate;
							}

							@keyframes divanimation{
								0%{
									margin-left: 5px;
									border:5px dotted yellow;
									background-color: purple;
								}
								30%{
									margin-left: 15px;
									border:5px dashed pink;
									background-color: blue;
								}
								50%{
									margin-left: 25px;
									border:5px double red;
									background-color: white;
									color: black;
								}
								70%{
									margin-left: 35px;
									border:5px solid orange;
									background-color: gray;
									color: gold;
								}
								100%{
									margin-left: 40px;
									border:5px solid white;
									background-color: green;
									color: white;
								}
							}
						</style>
					</head>
					<body>
						<div id="d1">
							www.qingsword.com
						</div>
					</body>
					</html>
					

显示效果:

www.qingsword.com

0×5.停止播放

如果我们想停止某个动画的播放,除了注释动画调用属性外,还可以在调用标签中插入"animation-play-state: paused;",这样刷新页面后,这个标签将不会加载任何动画,默认情况下,动画停止在起始位置(animation-fill-mode:backforwards;),但如果我们想让动画停止在结束位置,可以将animation-fill-mode属性值设置成forwards,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>动画停止实例</title>

						<style type="text/css">
							#d1{
								width: 250px;
								height: 50px;
								text-align: center;
								line-height: 50px;
								border:2px solid gold;
								animation-name: divanimation;
								animation-duration: 5s;
								animation-delay: 10s;
								<!--动画播放完成后,将停止在结束位置,大家可以刷新后定位到下面的显示区查看这个属性的效果-->
								animation-fill-mode:forwards;
							}

							@keyframes divanimation{
								from{
									margin-left: 5px;
									border:5px dotted yellow;
									background-color: purple;
								}
								to{
									margin-left: 40px;
									border:5px double white;
									background-color: green;
									color: white;
								}
							}
						</style>
					</head>
					<body>
						<div id="d1">
							www.qingsword.com
						</div>
					</body>
					</html>
					

显示效果:

www.qingsword.com

0×6.animation简写模式

上面所有的animation子属性,都能一次性卸载animation属性中,下面是完整格式:

animation: 动画名称 动画执行秒数 缓动速度 执行次数 是否交替缓动 延迟秒数 停留位置;

下面用一个实例来演示一下简写模式:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>动画综合实例</title>

						<style type="text/css">
							#d1{
								width: 250px;
								height: 50px;
								text-align: center;
								line-height: 50px;
								border:2px solid gold;
								<!--如果设置了重复播放,可以将最后的"停留位置"这一参数设置成both,或者直接省略不写,另外如果不需要交替,可以使用normal代替-->
								animation: divanimation 5s ease infinite normal 0s both;
								<!--如果使用下面这句配置替换上面这句,那么就是循环3次,并且交替缓动,因为是交替缓动并且配置了动画停止后不返回起始点,最后div会停留在结束点-->
								<!--animation: divanimation 5s ease 3 alternate 0s forwards;-->
							}

							@keyframes divanimation{
								from{
									margin-left: 5px;
									border:5px dotted yellow;
									background-color: purple;
								}
								to{
									margin-left: 40px;
									border:5px double white;
									background-color: green;
									color: white;
								}
							}
						</style>
					</head>
					<body>
						<div id="d1">
							www.qingsword.com
						</div>
					</body>
					</html>
					

显示效果:

www.qingsword.com

Ps:因为浏览器兼容性的问题,部分火狐浏览器无法识别特殊的边框属性,IE低版本浏览器目前还无法支持动画效果(2016年),请使用谷歌浏览器浏览本页查看完整效果。