一、动画序列

定义动画时 , 需要设置动画序列 , 下面的 0% 和 100% 设置的是动画在运行到某个百分比节点时的标签元素样式状态 ;

@keyframes element-move {  0% { transform: translateX(500px); }  100% { transform: translateX(0); }  
}

动画序列规则 :

0% 是动画的开始状态 ;
100% 是动画的终止状态 ;
使用百分比可以定义动画样式变化的节点 , 也可以使用 from 和 to 关键字 ;
动画的初始状态和终止状态的样式个数是任意多个 ;
动画的执行次数是任意多次 ;

二、代码示例 - 使用 from 和 to 定义动画序列

使用 from 和 to 关键字定义动画序列 , 等价于使用 0% 和 100% 定义的动画序列 ;

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定义动画</title><style>div {/* 设置动画的主要作用元素 */width: 200px;height: 200px;background-color: pink;/* 设置动画相关样式 */animation-name: element-move;animation-duration: 1s;}@keyframes element-move {/* 定义动画 */from {transform: translateX(500px);}to {transform: translateX(0);}}</style>
</head><body><div></div>
</body></html>

执行结果 :

刚进入页面后 , div 盒子模型出现在右侧 ;
1 秒内 , 上述盒子模型会自动走到最左侧 ;

三、代码示例 - 定义多个动画节点

使用 0% , 25% , 50% , 75% , 100% 定义的动画序列中的多个动画节点 ;

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定义动画</title><style>div {/* 设置动画的主要作用元素 */width: 200px;height: 200px;background-color: pink;/* 设置动画相关样式 */animation-name: element-move;animation-duration: 1s;}@keyframes element-move {/* 定义动画 */0% {/* 第一状态 / 默认状态 在左上角 *//* 没有任何变化 也可以空着 */transform: translate(0, 0);}25% {/* 第二状态 走到右上角 */transform: translate(400px, 0);}50% {/* 第三状态 走到右下角 */transform: translate(400px, 200px);}75% {/* 第四状态 走到左下角 */transform: translate(0, 200px);}100% {/* 回到初始状态 *//* 第五状态 走到左上角 */transform: translate(0, 0);}}</style>
</head><body><div></div>
</body></html>