css中animation和@keyframes 动画-猿码集

1. 介绍

CSS中的animation和@keyframes是用来创建动画效果的两个关键属性。animation属性用于定义动画的名称、时长、延迟和重复次数等细节；@keyframes规则则用于描述动画的关键帧。

2. animation属性

2.1 animation-name

animation-name属性用于指定动画的名称，可以是已定义的名称，也可以是自定义的名称。可以通过以下方式定义动画的名称：


animation-name: slidein;

其中，slidein为自定义的动画名称。

2.2 animation-duration

animation-duration属性用于指定动画的时长，单位可以是秒(s)或毫秒(ms)。可以通过以下方式定义动画的时长：


animation-duration: 3s;

其中，3s表示动画时长为3秒。

2.3 animation-delay

animation-delay属性用于指定动画的延迟时间，即动画开始前的等待时间。可以通过以下方式定义动画的延迟时间：


animation-delay: 1s;

其中，1s表示动画延迟1秒后开始。

2.4 animation-iteration-count

animation-iteration-count属性用于指定动画的重复次数。可以通过以下方式定义动画的重复次数：


animation-iteration-count: infinite;

其中，infinite表示动画无限次重复。

2.5 animation-fill-mode

animation-fill-mode属性用于指定动画在非活动时间段之前或之后的样式。可以通过以下方式定义动画的填充模式：


animation-fill-mode: forwards;

其中，forwards表示动画结束时保持最后一个关键帧的样式。

2.6 animation-timing-function

animation-timing-function属性用于指定动画的时间函数，即动画过程中样式的变化速度。可以通过以下方式定义动画的时间函数：

animation-timing-function: ease-in-out;

其中，ease-in-out表示动画先加速后减速。

3. @keyframes规则

3.1 @keyframes语法

@keyframes规则用于定义动画的关键帧，其中包含了动画在不同时间点的样式。可以通过以下方式定义@keyframes规则：


@keyframes slidein {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

其中，slidein为动画名称，from与to关键字分别表示动画的起始和结束关键帧。

3.2 关键帧百分比

除了使用from和to关键字，还可以使用百分比来定义关键帧。可以通过以下方式定义关键帧百分比：


@keyframes slidein {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

其中，0%表示动画的起始关键帧，100%表示动画的结束关键帧。

4. 实例

下面是一个使用animation和@keyframes创建动画的例子：


/* 定义动画的关键帧 */
@keyframes slidein {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
/* 应用动画 */
.element {
  animation-name: slidein;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

以上示例中，定义了一个名为slidein的动画，使元素在3秒内从左边滑动到右边，并设置该动画无限重复。

5. 总结

通过CSS中的animation和@keyframes属性，我们可以轻松创建各种动画效果。animation属性用于定义动画的名称、时长、延迟和重复次数等细节，@keyframes规则用于描述动画的关键帧。通过合理搭配和调整这两个属性的取值，可以实现丰富多样的动画效果。

css中animation和@keyframes 动画