简单的 JavaScript 动画 1 秒来突出显示文本？

好的，以下是我为您提供的答案：

简短的 JavaScript 动画

简短的 JavaScript 动画可以在网页上创建动态效果，吸引用户注意力并提高用户体验。在 HTML 文档中使用 CSS 和 JavaScript 可以实现动画效果。

1. CSS 动画

CSS 动画是一种通过修改 CSS 样式属性来实现的动画效果。可以使用以下语法创建一个简单的 CSS 动画：

@keyframes custom-animation {
  0%   { /* 动画开始时的样式 */ }
  100% { /* 动画结束时的样式 */ }
}

然后，可以将关键帧定义的样式应用到想要添加动画的元素的样式中，如下所示：

.element {
  animation: custom-animation 1s linear infinite; /* 使用名为 custom-animation 的自定义动画，持续时间为 1 秒，线性动画，无限循环 */
}

在上面的代码中，.element 是要添加动画的元素，animation 属性指定了要使用的自定义动画，1s 指定了动画的持续时间，linear 指定了动画的缓动方式，infinite 指定了动画无限循环。

2. JavaScript 动画

JavaScript 动画是通过修改 HTML 元素或元素的 CSS 样式属性实现的。可以使用以下语法创建一个简单的 JavaScript 动画：

// 获取要添加动画的元素
const element = document.querySelector('.element');

// 定义动画函数
function animate() {
  // 获取元素的当前样式
  const currentStyle = getComputedStyle(element);

  // 定义动画函数中的逻辑
  element.style.backgroundColor = currentStyle.backgroundColor;

  // 重复动画函数，直到动画结束
  setTimeout(animate, 10);
}

// 开始动画
animate();

在上面的代码中，animate 函数使用了 setTimeout 函数，该函数在每次调用时都会将元素的背景颜色设置为当前样式。通过不断重复调用 animate 函数，直到动画结束。

3. 演示案例

下面是一个简单的演示案例，该案例中使用 CSS 动画和 JavaScript 动画实现了一个简单的页面滚动效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 300px;
      height: 200px;
      overflow-y: scroll;
    }

    .element {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: scroll 1s linear infinite;
    }

    @keyframes scroll {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <script>
    const elements = document.querySelectorAll('.element');

    function scroll() {
      elements.forEach(element => {
        element.style.transform = `translateY(${element.offsetTop}px)`;
      });

      setTimeout(scroll, 10);
    }

    scroll();
  </script>
</body>
</html>

在上面的代码中，.container 是一个包含要滚动元素的容器，其中每个元素都使用 scroll 函数定义了动画。在每次调用 scroll 函数时，该函数会获取元素的当前位置，并使用 translateY 函数将元素向下移动，直到元素完全移出视图