基于CSS原生JS、Vue3.0技术各自实现序列帧动画效果

由于这个问题涉及到多个技术栈，我将提供每个部分的核心代码。

1. CSS3实现序列帧动画：

/* 定义关键帧 */
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}
 
/* 应用动画 */
.box {
  width: 100px;
  height: 100px;
  animation-name: example; /* 使用关键帧的名称 */
  animation-duration: 4s; /* 动画时长 */
}

2. 原生JS实现序列帧动画：

// 获取元素
const box = document.querySelector('.box');
 
// 定义序列帧动画
const keyframes = [
  { backgroundColor: 'red' },
  { backgroundColor: 'yellow' }
];
 
// 应用动画
function animate(timeFraction) {
  const color = keyframes[Math.floor(timeFraction * keyframes.length)];
  box.style.backgroundColor = color.backgroundColor;
}
 
// 主循环
function animateLoop(time) {
  requestAnimationFrame(animateLoop);
  const timeFraction = (time / 1000) % keyframes.length;
  animate(timeFraction);
}
 
requestAnimationFrame(animateLoop);

3. Vue 3.0实现序列帧动画：

首先，在Vue组件中定义样式和关键帧：

/* 组件内部的<style>标签 */
<style>
@keyframes example {
  0%   { background-color: red; }
  100% { background-color: yellow; }
}
.box {
  width: 100px;
  height: 100px;
  animation: example 4s infinite;
}
</style>

然后，在模板中使用该样式：

<template>
  <div class="box"></div>
</template>

这样就实现了序列帧动画的Vue 3.0版本。注意，Vue 3.0中的动画是基于CSS的，所以我们使用了CSS的animation属性并设置了infinite来实现持续循环播放动画。