利用CSS让精灵图动起来

CSS的动画animation

1、动画的基本使用

制作动画分为两步︰ 1．先定义动画 2．再使用(调用)动画

先制作一个blingbling的动画

.blingbling {
  animation: scaleout 1s infinite ease-in-out;
}

@keyframes scaleout {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@-webkit-keyframes scaleout {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

html结构如下：

<div class="blingbling"></div>

展示的效果如下：

2、认知一下它的属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称。（必须的)
animation-duration	规定动画完成—个周期所花费的秒或毫秒，默认是0。（必须的)
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（无线次)
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal "，“alternate”逆播放
animation-fill-mode	规定动画结束后状态，保持当前状态forwards 回到起始backwards

3、实现功能：电池充电放电

<!-- 电池逐帧动画 -->
<div class="battery-wrap-sprite battery-ani"></div>

.battery-wrap-sprite {
  position: absolute;
  top: 72.4%;
  width: 59px;
  height: 144px;
  background-image: url("../../assets/img/topograph/batterysprites.png");
  background-repeat: no-repeat;
  animation: battery-move 5s steps(9) infinite;
}
@-webkit-keyframes battery-move {
 0% {
    background-position: 0 0;
  }
  100%{
    background-position: -531px, 0;
  }
}
@keyframes battery-move {
  0% {
    background-position: 0 0;
  }
  100%{
    background-position: -531px, 0;
  }
}

最终实现的效果