动画是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常常用来实现复杂的动画效果。相比较过度，动画可以实现更多变化，更多控制，连续自动(不需要鼠标经过和鼠标离开来控制)播放等效果。
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}动画序列
/*调用动画*/
animation-name: 动画名称；
/*持续时间*/
animation-duration: 持续时间；举例：
<body>
<div></div>
</body><style type="text/css">
/*1. 定义动画*/
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/*2. 调用动画*/
animation-name: move;
/*3. 持续时间*/
animation-duration: 2s;
}
</style>动画序列
原文：https://www.cnblogs.com/deer-cen/p/11994686.html