css3动画效果（旋转，帧动画）

一、css动画属性

animation是css3的动画属性，也是简写，其中包含以下几种值可配置

默认值：none 0 ease 0 1 normal

值	描述
animation-name	需要绑定到选择器的 keyframe 名称
animation-duration	完成动画所花费的时间，以秒或毫秒计（数字加单位，例：1s）
animation-timing-function	动画的速度曲线（动画将如何完成一个周期）
animation-delay	动画在启动前的延迟间隔
animation-iteration-count	动画应该播放的次数（无限：infinite；或者使用数字表示次数）
animation-direction	是否应该轮流反向播放动画

备注：

速度曲线

值	描述
linear	匀速
ease	慢-快-慢（加速快）
ease-in	慢-快
ease-out	快-慢
ease-in-out	慢-快-慢（加速慢）
cubic-bezier(n,n,n,n)	自定义（n取值为0~1）

二、实例

1、普通动画（以旋转效果举例）

普通动画较为简单，不做详细介绍了，直接上代码

<template>
  <div class="main">
    <div class="animation"></div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  .animation {
    margin-left: 50px;
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    border-radius: 5px;
    animation: rotate 6s linear infinite;
    -webkit-animation:rotate 6s linear infinite; /* Safari 和 Chrome */
  }
  @-webkit-keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
    }

    50% {
      -webkit-transform: rotate(180deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }
}
</style>

2、帧动画

帧动画和普通动画略有区别，需要使用steps函数，steps函数接收一个数字参数 n，这个数字表示把动画分成 n 帧。
下面的示例，因为图片有30个片段，所以我分成了30帧去完成。

<template>
  <div class="main">
    <div class="animation"></div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  .animation {
    width: 96px;
    height: 100px;
    border: 1px solid #999;
    border-radius: 5px;
    cursor: pointer;
    background: url(~@/assets/img/frame.png);
    background-position: 0 4px;
  }
  .animation:hover {
    animation: run 1s steps(30) 0s 1 both;
    -webkit-animation: run 1s steps(1) 0s 1 both;  /* Safari 和 Chrome */
  }

  @-webkit-keyframes run {
    to {
      background-position: 0 3000%;
    }
  }
}
</style>

注意：
background-position参数的值要与div(dom)的宽度或者高度成整数倍关系，否则动画会出现移动现象。

效果图如下（只是截图，无法呈现动画效果）：鼠标移上去会执行一次动画，移开后复原