CSS - animation

CSS - animation

캐릭터가 걷는 애니메이션을 만들어봅시다.

HTML

<div class="sample">
    <h3><span></span><em class="sr-only">border-radius</em></h3>
    <div class="timing step">
        <div class="stepbox"></div>
        <span class="stepBtn">
            <a href="#" class="stepBtnStart">Start</a>
            <a href="#" class="stepBtnStop">Stop</a>
        </span>
    </div>
</div>

CSS

.step {
    height: 700px;
    background: #43ddf7;
    position: relative;
}

.step .stepbox {
    width: 800px;
    height: 600px;
    background: url(img/ani1.jpg);
    border-radius: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 1s steps(24, start) infinite;
}

.step .stepbox.start {
    animation-play-state: running;
}

.step .stepbox.stop {
    animation-play-state: paused;
}

@keyframes ani {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -19200px 0;
    }
}

.stepBtn {
    position: absolute;
    left: 15px;
    top: 20px;
}

.stepBtn a {
    background: #e16162;
    color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}

jquery

$(".stepBtnStart").click(function (e) {
e.preventDefault();
$(".stepbox").removeClass("stop").addClass("start");
});
$(".stepBtnStop").click(function (e) {
e.preventDefault();
$(".stepbox").removeClass("start").addClass("stop");
});

애니메이션

Start Stop