1.animation动画
transition属性只能简单模拟动画效果，而animation属性可以制作类似Flash动画
通过关键帧控制动画的每一步，使元素从一中样式变为另一种样式，实现复杂的动画效果
2.@keyframes，用于声明动画，指定关键帧
帧，用于分解动画动作，每一帧代表某个时间点
书写格式：
@keyframes name（自定义名称）{
from | 0% { CSS样式 }
percent | n% { CSS样式 }
to | 100% { CSS样式 }
}
3.animation属性，用于调用及控制由@keyframes定义的动画
简写属性书写格式：animation：name duration timing-function delay iteration-count direction
animation-name，设置需要调用的@keyframes动画的名称
animation-duration，播放动画持续的时间周期，时间单位 s/ms
animation-timing-function，设置动画播放的时间曲线，属性值与 transition-timing-function相同，包括 linear、ease、ease-in、ease-out、ease-in-out等
animation-delay，设置动画何时开始（延迟时间）
animation-iteration-count，设置动画播放的次数，属性值：n（数值，默认为1）、infinite（无限次/永远）
animation-direction，设置循环交替时反向播放动画，
属性值：normal（正常播放，默认）、reverse（反向播放）、alternate（奇数次正向播放、偶数次反向播放）、alternate-reverse（奇数次反向播放、偶数次正向播放）
animation-fill-mode，规定当动画未播放时（播放完或开始前）应用到元素的样式，
属性值：none（无样式，默认）、forwards（在动画结束后（由animation-iteration-count决定）应用该属性值）、
backwards（应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值）
both（同时遵循forwards和backwards 的规则）
animation-play-state，运行或暂停动画，属性值：paused（暂停）、running（运行，默认）
4.轮播图测试代码
<html>
<head>
<meta charset="utf-8">
<title>CSS_animation</title>
<style>
.cont{
600px;
height: 600px;
background-color: #e5e5e5;
margin: 50px auto;
background-image: url("images/number/one.jpg");
background-repeat: no-repeat;
background-position: center;
-webkit-animation: rot 8s ease-in 1s 3 alternate forwards;
}
@-webkit-keyframes rot {
0%{
background-image: url("images/number/one.jpg");
}
25%{
background-image: url("images/number/two.jpg");
}
50%{
background-image: url("images/number/three.jpg");
}
75%{
background-image: url("images/number/four.jpg");
}
100%{
background-image: url("images/number/five.jpg");
}
}
</style>
</head>
<body>
<div class="cont">
</div>
</body>
</html>
5.border绘制三角形、梯形
<html>
<head>
<meta charset="utf-8">
<title>CSS_graph</title>
<style>
.cont{
0px; /* width=0时，三角形；width>0时，梯形；其他三个方向设置同理 ’*/
/*height: 100px;*/
background-color: transparent;
margin: 100px auto;
/*border-top: 120px solid red;*/
border-right: 120px solid transparent;
border-bottom: 120px solid green;
border-left: 120px solid transparent;
}
</style>
</head>
<body>
<div class="cont">
</div>
</body>
</html>