css3动画怎么新建

CSS3动画可以通过使用@keyframes规则来创建。@keyframes规则允许开发者指定一个动画序列，该序列包含了在不同时间点上元素应该具有的样式。通过定义动画的关键帧，我们可以控制元素在不同时间点上的样式，从而实现动画效果。

我们需要使用@keyframes规则来定义动画的关键帧。@keyframes规则包含了一个动画名称和一系列的关键帧。每个关键帧由一个百分比值和对应的样式组成。我们可以使用百分比值来控制元素在动画过程中的样式变化。

例如，我们想要创建一个简单的淡入动画，可以使用以下代码：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

在上面的代码中，我们定义了一个名为fadeIn的动画。该动画在0%时元素的透明度为0，在100%时元素的透明度为1。通过将该动画应用到元素上，我们可以实现一个淡入效果。

接下来，我们可以通过将动画应用到元素上来触发动画效果。可以使用animation属性来设置动画的名称、持续时间、延迟时间、动画速度等属性。

例如，我们可以将上面定义的fadeIn动画应用到一个元素上，并设置动画的持续时间为2秒：

.element {
  animation: fadeIn 2s;
}

在上面的代码中，.element是一个CSS选择器，用于选择要应用动画的元素。通过设置animation属性为fadeIn 2s，我们将fadeIn动画应用到了.element元素上，并指定了动画的持续时间为2秒。

除了设置动画的持续时间，我们还可以使用animation-delay属性来设置动画的延迟时间，animation-timing-function属性来设置动画的速度曲线，animation-iteration-count属性来设置动画的重复次数等。

总结来说，通过使用@keyframes规则和animation属性，我们可以创建各种各样的CSS3动画效果。通过定义动画的关键帧和设置动画属性，我们可以控制元素在不同时间点上的样式变化，从而实现动画效果。我们还可以通过调整动画的持续时间、延迟时间、速度曲线等属性来进一步定制动画效果。