@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。
transform
transform: rotate（旋转） | scale（缩放） | skew（倾斜） | translate（移动） ;translate（x轴，y轴）：代表水平和垂直方向的移动，支持一个参数，代表水平移动
rotate（20deg）：参数为旋转角度，单位deg
scale(x轴，y轴)：代表水平和垂直方向的缩放，当一个值时水平和垂直等于一个值
skew（x轴，y轴）：代表水平和垂直方向的倾斜，支持一个参数，代表水平倾斜
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
注意： Internet Explorer 9 要求前缀 -ms- 版本.
@keyframes与transform去区别
@keyframes动画是循环的，而transform 只执行一遍
animation
Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作
1、animation-name ：xx （设置关键帧的名称为xx）
2、animation-duration：5s （动画持续时间为5s）
3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速）
取值：
linear 匀速、 ease （默认）低速开始—>加速—>结束前减速 、
ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4、animation-delay:5s (动画等待5后开始)
5、animatiom-iteration-count：1 （动画播放次数为1次）
取值：xx数字，定义应该播放xx次动画、 infinite-无限次执行
6、animation-direction： alternate（设置动画为反向播放 ）
取值：
nomal（默认）-执行完一次之后回到起点继续执行下一次
alternate-往返动画，执行完一次之后往回执行下一次
reverse-反向执行
7、animation-fill-mode： （动画结束的最后一帧）
取值：
none-不做任何改变
forwards-让元素结束状态保持动画最后一帧的样式
backwards-让元素等待状态的时候显示动画第一帧的样式
both-等待状态显示第一帧，结束状态保持最后一帧
8、animation-play-state： （设置动画是否暂停）
取值：running-执行动画 、paused-暂停动画
animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画
animation：动画名称 动画时长 （有这两个即可以完成动画，其它未设置，有默认值）
示例：摆钟效果（画一条线和圆圈形成摆钟图案，通过 transform-origin 旋转以上方中间为中心进行旋转，因为默认是中间中心旋转）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
/* 画一条钟摆线条 */
.line {
margin: 24px 0 0 320px;
width: 6px;
height: 320px;
background: #2262f8;
border-radius: 8px;
/* 钟摆动画周期两秒、匀速运动、无限循环 */
animation: pendulum 5s linear infinite;
/* 旋转以上方中间为中心进行旋转，因为默认是中间中心旋转 */
transform-origin: top;
/* 注意因为钟摆的小球是使用伪元素画的，故这里要加上生成相对定位的元素 */
position: relative;
}
/* 使用伪元素画钟摆小球，这样在旋转的时候，小球就一致跟着钟摆线了 */
.line::after {
content: '';
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #9C27B0;
/* 伪元素搭配生成绝对定位的元素方便调整小球的位置 */
position: absolute;
bottom: 0;
left: -12px;
}
/* 钟摆动画rotate旋转起来 */
@keyframes pendulum {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
}
25% {
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
}
50% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
}
75% {
transform: rotate(-45deg);
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Safari and Chrome */
}
100% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
}
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>