技術標籤：css3css3css

css3幀動畫

前段時間我得到這張圖，

我就在想 這個不是做css3幀動畫的素材嗎？

想了就開始吧，

…

…

好吧我已經做完了

想要使用 複製html css就能使用

<template>
  <div class="animation">
    <img src="@/assets/love.png" alt="">
  </div>
</template>

<script>
export default {
  name: "animation",
  components: {},
  data() {
    return {};
  },
};
</script>
<style lang='less' scoped>
.animation {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
  img {
    animation-name: myfirst;
    animation-duration: 1s;
    // 主要是這個設定的這個函式  steps(1, start)
    animation-timing-function: steps(1, start);
    // animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
}

@keyframes myfirst {
  0% {
    transform: translateX(-0px);
  }
  10% {
    transform: translateX(-100px);
  }
  20% {
    transform: translateX(-200px);
  }
  30% {
    transform: translateX(-300px);
  }
  40% {
    transform: translateX(-400px);
  }
  50% {
    transform: translateX(-500px);
  }
  60% {
    transform: translateX(-600px);
  }
  70% {
    transform: translateX(-700px);
  }
  80% {
    transform: translateX(-800px);
  }
  90% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(-900px);
  }
}
</style>
 

總結：

注意事項：

animation-timing-function 除了上面的幾種常用方式之外，還有個一實用的函式，steps(number_of_steps, direction)，這個函式叫做階梯函式，這個函式能夠起到定格動畫的效果。

階梯函式不像其他定時函式那樣，平滑的過渡，而是以幀的方式過渡。

他有兩個引數：

• number_of_steps ：階梯數（必須是一個正整數），他將動畫的總時長按照階梯數等距劃分
• direction ：可選值為start或end，預設end，也可以不寫；start表示動畫的第一幀會被立即執行,直接從第二幀開始，然後以第一幀結束；end則表示動畫從第一幀開始到正常結束；

將動畫的總時長按照階梯數等距劃分

• direction ：可選值為start或end，預設end，也可以不寫；start表示動畫的第一幀會被立即執行,直接從第二幀開始，然後以第一幀結束；end則表示動畫從第一幀開始到正常結束；