CSS3: animate 帧动画和雪碧图-完成一个盒子打开动画

// 盒子居中布局
.stars{
    opacity: 0;
}

.box{
    top:50%;
    left:50%;
    position:absolute;
    transform: translate(-50%,-50%);
}

// 基础 keyframes  函数
@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
      @content;
  }
}

// 由于是 translate 布局，这里改变定位使用 translate
@mixin animate-bounce($name:'bounce', $time: 1.5s, $animateFunc: linear) {
  animation: $name $time ?animateFunc;
  @include keyframes($name) {
        0% {
            transform: scaleY(1) translate(-50%, -50%);
        }
        8% {
            transform: scaleY(0.98) translate(-50%, -48%);
        }
        50% {
            transform: scaleY(1) translate(-50%, -70%);
        }
        100% {
            transform: scaleY(1) translate(-50%, -50%);
        }
    }
  }
}

@mixin animate-box-cover-fly($name:'box-cover-fly', $time: 1.5s, $animateFunc: linear){
    animation: $name $time ?animateFunc;
  @include keyframes($name) {
        0% {
            top: 23%;
            left: 50%;
        }
        100% {
            top: 5%;
            left: 62%;
            transform: translate(-20%, -50%) rotateZ(26deg);
        }
    }
  }
}

// 盒子弹跳
.box-bounce{
    @include animate-bounce('bounce');
}

.box-cover-fly{
    @include animate-box-cover-fly('box-cover-fly');
}

 <div className="step-box" />
复制代码

@mixin animate-spite-box($width: 134px) {
  background: url('https://uploads.codesandbox.io/uploads/user/abc364e4-ea65-4398-a1dc-df2645675b64/U59a-lightbulb.png') 0 0 no-repeat;
  background-size: cover;
  animation: spite-box 1s steps(4) infinite;
  @include keyframes(spite-box) {
    from {
      background-position: -8*$width;
     }
     to {
      background-position: -12*$width;
     }
  }
}

$box-width: 134px
$box-height: 113px;
.step-box{
    width: $box-width;
    height: $box-height;
    @include animate-spite-box($box-width);
}