CSS一个常规动画一个循环动画NO JS

CSS动画是为了给网页增加更多的交互性和视觉效果。通常情况下，我们可以使用CSS来实现一些简单的动画效果，而不需要使用JavaScript。本文将介绍一个常规动画和一个循环动画的实现方法，同时遵循题目要求的格式。

常规动画

1. 创建动画关键帧

首先，我们需要创建一个动画的关键帧（keyframes），来定义动画的起始状态和结束状态。关键帧使用`@keyframes`规则来定义，其中可以设置不同的百分比来表示动画的状态。

@keyframes example-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

在上面的例子中，我们定义了一个名为`example-animation`的关键帧，起始状态为透明度为0，结束状态为透明度为1。

2. 应用动画

然后，我们需要将创建的动画应用于具体的元素中。可以使用`animation-name`属性来指定动画的名称，使用`animation-duration`属性来设置动画的持续时间。

.element {
  animation-name: example-animation;
  animation-duration: 1s;
}

在上面的例子中，我们将`example-animation`关键帧应用于`.element`元素，并设置动画的持续时间为1秒。

以上就是常规动画的实现方法。通过定义关键帧和应用动画，我们可以实现元素的渐入渐出，或者其他一些简单的动画效果。这种方法不需要使用JavaScript，只需要使用CSS就能轻松实现。

循环动画

1. 创建无限循环动画

除了常规动画，我们还可以创建一个无限循环的动画。我们可以使用`animation-iteration-count`属性来设置动画的循环次数。

@keyframes infinite-animation {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.element {
  animation-name: infinite-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

在上面的例子中，我们定义了一个名为`infinite-animation`的关键帧，其中通过`transform`属性实现了一个元素的缩放效果。然后，我们将该关键帧应用于`.element`元素，并将动画的循环次数设置为无限循环。

循环动画可以通过设置动画的循环次数为无限来实现，这样动画就可以一直循环下去。

总结

通过上述的介绍，我们学习了如何使用CSS来实现一个常规动画和一个循环动画。常规动画通过定义关键帧和应用动画，可以实现元素的渐入渐出等效果。循环动画通过设置动画的循环次数为无限，实现了一个持续循环的动画效果。

使用CSS可以实现各种各样的动画效果，而不需要依赖JavaScript，这为网页增加了更多的交互性和视觉效果。

以上就是本文关于CSS一个常规动画和一个循环动画的介绍，希望可以对您有所帮助。