动画

小球

<template>
  <div class="h-400">
    <span class="ball"></span>
  </div>
</template>

<style lang="scss" scoped>
@keyframes bounce {
  60%,
  80%,
  to {
    transform: translateY(400px);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translateY(300px);
  }
  90% {
    transform: translateY(360px);
  }
}

.ball {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
  animation: bounce 3s infinite ease-in;
}
</style>

帧动画

<template>
  <div class="h-200 bg"></div>
</template>

<style lang="scss" scoped>
.bg {
  width: 110px;
  background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.e70e7d41a4a2af947f551aa49b1236d2?rik=N%2fZHtDGVKrKyVQ&riu=http%3a%2f%2fupload-images.jianshu.io%2fupload_images%2f2625875-c538179502a503d0.png&ehk=tsYj%2bA%2b%2fwdFjZu5yJ1euaJ1K9vIDnaXOkKcoNh8FcyI%3d&risl=&pid=ImgRaw&r=0);
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: frames 1s infinite steps(8);
}
@keyframes frames {
  to {
    background-position: -906px 0;
  }
}
</style>

闪烁

闪烁

<template>
  <div class="highlight">闪烁</div>
</template>

<style lang="scss" scoped>
@keyframes blink-smooth {
  50% {
    color: transparent;
  }
}

.highlight {
  color: red;
  animation: 1s blink-smooth infinite alternate;
}
</style>

打印字

我是一段被打印的文字。

<template>
  <div class="print">我是一段被打印的文字。</div>
</template>

<style lang="scss" scoped>
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

.print {
  width: 12em;
  box-sizing: content-box;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid;
  animation: typing 6s steps(12) infinite, caret 1s steps(1) infinite;
}
</style>

状态控制

<template>
  <div class="h-300 state"></div>
</template>

<style lang="scss" scoped>
.state {
  background-image: url(https://uploadstatic.mihoyo.com/ys-obc/2022/12/05/12109492/6105ce8dd57dfd2efbea4d4e9bc99a7f_3316973407293091241.png);
  background-repeat: no-repeat;
  background-size: contain;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}
.state:hover {
  animation-play-state: running;
}
@keyframes panoramic {
  to {
    background-position: 100% 0;
  }
}
</style>