js的动画效果怎么做

function animate() {
  // 更新元素的位置或其他属性
  element.style.transform = `translateX(${x}px)`;
  
  // 更新 x 的值以产生移动效果
  x += 1;
  
  // 请求下一帧动画
  requestAnimationFrame(animate);
}

// 开始动画
requestAnimationFrame(animate);

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.animated-element {
  animation: slideIn 2s ease-in-out;
}

import { CSSTransition } from 'react-transition-group';

function FadeIn({ show }) {
  return (
    <CSSTransition in={show} timeout={300} classNames="fade">
      <div className="box">Hello, world!</div>
    </CSSTransition>
  );
}

<template>
  <transition name="fade">
    <div v-if="show" class="box">Hello, world!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return { show: true };
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>