❏ css - 키프레임(@keyframes)으로 이미지 슬라이드 쇼 만들기!

안녕하세요!

 

오늘은 애니메이션 속성의 키프레임을 가지고 이미지 슬라이드쇼를 만들어보도록 하겠습니다.

 

👇👇👇 키프레임에 대한 자세한 설명은 아래 글을 확인해 주세요! 👇👇👇

https://y-seon97.tistory.com/45?category=1046996 

❏ css - 애니메이션(animation) 속성과 키프레임(@keyframse)

---

오늘 만들어 볼 것을 미리보겠습니다!

 

이렇게 이미지가 자동으로 재생되는 슬라이드 쇼입니다!

 

✎ html

 

    <div class="container">
            <div class="slide">
                <h2>We Are TAESAN product Inc.</h2>
            </div>    
    </div>

 

✎ css

.container{
    animation-name: back_change;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes back_change{
    0% {background:url(../img/01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    10% {background:url(../img/02.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    20% {background:url(../img/03.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    30% {background:url(../img/04.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    40% {background:url(../img/05.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    50% {background:url(../img/01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    60% {background:url(../img/02.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    70% {background:url(../img/03.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    80% {background:url(../img/04.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    90% {background:url(../img/05.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}
    100% {background:url(../img/01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;}                              
}

 

100초를 0%부터 100%로 시간을 나눠 보이고 싶은 이미지를 넣어주고

계속해서 반복적으로 재생이 돼야 하기 때문에 infinite라는 속성을 넣어보았답니다.

 

---

이렇게 애니메이션 속성 중 키프레임을 사용하여 슬라이드 쇼를 만들어볼 수 있었네요!

키프레임 속성에 대한 이해만 있으시다면 손쉽게 만들어볼 수 있답니다!

 

오늘도 읽어주셔서 감사합니다!

ദ്ദി ᵔ∇ᵔ )