애니메이션 만들기

뚜벅뚜벅 나의 길을 걷는다.

애니메이션

Start Stop

css 보기

.step {
    height: 700px;
    background: #3b0670;
    position: relative;
}
.step .stepbox {
    width: 800px; height: 600px;
    background: url(https://github.com/Packsunhye/coding/blob/main/aniamation/img/20220907_GIP.jpg?raw=true);
    border-radius: 0;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 1.4s steps(31, 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: -24800px 0;}
}
.stepBtn {
    position: absolute; left: 15px; top: 20px;
}
.stepBtn a {
    background: #e16162; color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}

html 보기

<div class="sample">
    <h3>애니메이션</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>
</div>

javascript 보기

  $(".start1").click(function(){
    $(".timing.bg1 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg1 > div").removeClass("show");
    },2000);
});

$(".start2").click(function(){
    $(".timing.bg2 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg2 > div").removeClass("show");
    },4000);
});

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

$(".start3").click(function(){
    $(".timing.bg3 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg3 > div").removeClass("show");
    },3000);
});

$(".start4").click(function(){
    $(".timing.bg4 > div").addClass("show");
    setTimeout(function(){
        $(".timing.bg4 > div").removeClass("show");
    },3000);
});

$(".start5").click(function(){
    $(".timing.bg5 > div").addClass("show");
});

$("#intro6 > button").click(function(){
    let txt = $(this).text();
    $(".timing25").removeClass("normal reverse alternate alternate-reverse").addClass(txt);
});

$(".start7").click(function(){
    $(".timing.bg7 > div").addClass("show");
});

$("#intro8 > button").click(function(){
    let txt = $(this).text();
    $(".timing30").removeClass("running paused").addClass(txt);
});

$("#intro9 > button").click(function(){
    let txt = $(this).text();
    $(".timing.bg9 > div").removeClass("ani1 ani2 ani3 ani4 ani5 ani6 ani7").addClass(txt);
});