css 宝箱摇晃动画

| 效果

| 源码

HTML

<span class="is-unlock-box"></span>

CSS

/* 宝箱动画 */
@keyframes zy {
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50%,
    100% {
        transform: rotate(0deg);
    }
}

.is-unlock-box {
    @include bgimage("./images/game/icon-box.png");
    animation: zy 2.5s 0.15s linear infinite;
    -moz-animation: zy 2.5s 0.15s linear infinite; /* Firefox */
    -webkit-animation: zy 2.5s 0.15s linear infinite; /* Safari and Chrome */
    -o-animation: zy 2.5s 0.15s linear infinite; /* Opera */
}