CSS Animation 2

CSS 애니메이션 효과

CSS를 이용해 애니메이션 효과를 주는 방법입니다.

---

포토샵을 이용한 애니메이션

이번 애니메이션 효과는 포토샵을 이용해 여러개의 이미지를 하나로 이어 붙인 후 css를 사용해 애니메이션을 주는 효과입니다.

▶ 포토샵으로 이미지 만들기

CSS로 사진같은 이미지의 애니메이션을 구현하기 위해선 여러장의 이미지를 이어붙여야 합니다.

▶ CSS로 애니메이션 구현하기

백그라운드로 이어붙인 이미지를 불러온 후 애니메이션 속성으로 각 이미지를 연속적으로 보여줌으로써 애니메이션이 구현됩니다.

이 때 step은 이미지의 초당 프레임을 나타내며 이미지가 24장일때 24를 쓰면 1초에 모든 이미지가 연속적으로 보여집니다.

border-radius

Start Stop

<style>
    .step {
        height: 700px;
        background: #ffe8d9;
        position: relative;
    }
    .step .stepbox {
        width: 800px; height: 600px;
        background: url(https://mbynae.github.io/coding/animation/img/img.jpg);
        border-radius: 0;
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        animation: ani 0.5s 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;
></style>    }
    .stepBtn a {
        background: #e16162; color: #fff;
        padding: 10px;
        margin: 3px;
        border-radius: 3px;
    }
</style>

<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>

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

원본 소스 보기