css简单方块来回运动动画

简单方块来回运动动画

来回运动动画

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

<style scoped>/* scoped限定样式只在当前页面生效，不影响全局样式 */
.animateBox {
  position: relative;
  height: 50px;
  width: 50px;
  animation: myfirst 3s linear infinite alternate;
}
@keyframes myfirst {
  0% {
    background: blueviolet;
    left: 0px;
    top: 0px;
  }
  100% {
    background: yellow;
    left: 100px;
    top: 0px;
  }
}
</style>