nvue 支持@keyframes吗

是的，nvue 支持 @keyframes 动画。你可以使用类似于 Web 开发中的 CSS 动画的方式在 nvue 中创建动态效果。你可以在 nvue 的 style 标签中使用@keyframes 规则来定义动画，然后将其应用于需要动画的元素。例如：

<template>
  <view class="box"></view>
</template>
<style>
  @keyframes example {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 2s linear infinite;
  }
</style>

在上面的代码中，我们定义了一个名为 example 的动画，它会将元素不断旋转 360 度。然后将该动画应用于一个具有 red 背景色的正方形盒子中，并设置动画时间为 2 秒，动画方式为线性，且动画无限循环。

相关问题

@keyframes rotate

@keyframes 是 CSS 中的一个动画规则，用于定义动画的关键帧（Keyframes），它告诉浏览器在动画过程中，元素应该如何从一种样式变化到另一种样式。`rotate` 是其中一个关键帧的名称，通常与 `animation-name` 属性一起使用，用于描述元素旋转的动画过程。

例如，`@keyframes rotate` 可能会这样写：

@keyframes rotate {
  0% { transform: rotate(0deg); } /* 初始状态，元素不旋转 */
  100% { transform: rotate(360deg); } /* 结束状态，元素旋转一圈 */
}

在这个例子中，`rotate` 动画会在 0% 到 100% 这个时间范围内，让元素从静止开始旋转到完成一圈。你可以根据需要设置多个关键帧，控制动画的不同阶段。

@keyframes”

`@keyframes`是CSS3动画中的一个重要部分，它可以定义一个对象在不同时间点的状态，从而实现动画效果。

`@keyframes`规则由以下几个部分组成：
1. `@keyframes`关键字；
2. 动画名称，可以自定义；
3. 动画的关键帧，即动画中不同时间点的状态。

下面是一个`@keyframes`的示例代码：

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

上面代码中，定义了一个名为“example”的动画，它包含两个关键帧，“from”表示动画的初始状态，“to”表示动画的最终状态，这里的状态是一个背景色的变化，从红色到黄色的过程。

除了“from”和“to”关键字，还可以使用百分比来定义不同的关键帧，例如：

@keyframes example {
    0% {background-color: red;}
    50% {background-color: yellow;}
    100% {background-color: green;}
}

上面代码中，定义了三个关键帧，分别在动画的0%、50%和100%时间点，表示动画在不同的时间内的不同状态。

参考文献：[^1]