[SH FILM/CSS] (@keyframe - fade in left/right) 글자 옆에서 나타내기 애니메이션

 

좌측에서 우측으로,

우측에서 좌측으로

 

이렇게 나타내는 애니메이션은 @keyframe - fade in 애니메이션을 이용해서 만들 수 있는데

transform 값이 들어간다.

---

1. 좌측 -> 우측

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}


/* mainpage : app_main_intro */
.main_intro_sensitive,
.main_intro_convenience{
    position: relative;
    animation: fadeInLeft 3s;
    -webkit-animation: fadeInLeft 3s
}

@keyframes fadeInLeft 속성에서

transform: translate3d(-100%, 0, 0);

해당 부분이 -100%이면 좌측에서 우측으로 밀어서 애니메이션이 나타난다.

 

 

2. 우측 -> 좌측

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

.main_intro_function{
    position: relative;
    animation: fadeInRight 3s;
    -webkit-animation: fadeInRight 3s
}

우측에서 좌측으로 밀어서 애니메이션을 나타내고 싶다면

@keyframes fadeInRight 부분에서

transform: translate3d(100%, 0, 0);

해당 부분 중 100%로 지정하면 완성