[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年），请使用谷歌浏览器浏览本页查看完整效果。