css3帧动画

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>

总结：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 “ease”。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。	3

注意事项：

animation-timing-function 除了上面的几种常用方式之外，还有个一实用的函数，steps(number_of_steps, direction)，这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。

阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。

他有两个参数：

• number_of_steps ：阶梯数（必须是一个正整数），他将动画的总时长按照阶梯数等距划分
• direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；

将动画的总时长按照阶梯数等距划分

• direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；