面试题：CSS关键帧动画：@keyframes规则与animation属性的基本应用

Question

请用@keyframes规则和animation属性实现一个简单的从左到右移动的动画效果。假设元素初始位置在左边距0px处，最终移动到左边距500px处，动画时长为5秒，线性过渡，无限循环播放。并简要解释@keyframes中关键帧的含义以及animation各个属性的作用。

Answer 1

/* 定义动画关键帧 */
@keyframes moveFromLeftToRight {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 500px;
  }
}

/* 应用动画到元素 */
.element {
  animation: moveFromLeftToRight 5s linear infinite;
}

@keyframes中关键帧含义

• from：表示动画的起始状态，这里定义元素的左边距为0px。
• to：表示动画的结束状态，这里定义元素的左边距为500px。也可以使用百分比来定义关键帧，如0%等同于from，100%等同于to，还可以在中间定义其他百分比的关键帧，来实现更复杂的动画效果。

animation属性作用

• moveFromLeftToRight：指定应用的动画名称，对应@keyframes定义的动画名称。
• 5s：动画时长，即完成整个动画从起始状态到结束状态所需的时间为5秒。
• linear：动画过渡的时间函数，linear表示线性过渡，即动画以匀速进行。还有ease（默认值，慢速开始，中间加速，慢速结束）、ease - in（慢速开始）、ease - out（慢速结束）、ease - in - out（慢速开始和结束）等。
• infinite：动画播放次数，infinite表示无限循环播放，也可以指定具体的数字来表示播放次数。