애니메이션 사용법

미루고미루던 css 애니메이션 사용법...

keyframes 를 이용한 애니메이션 작업법

.box_slide_fwd {
    position: absolute; /* position absolute를 줘야 translateZ를 쓸 수 있음 */
}
.box_slide_fwd:hover {
    -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-fwd-center { /* slide-fwd-center : 애니메이션의 이름 */
    0% {
        -webkit-transform: perspective(0) translateZ(0);
        transform: perspective(0) translateZ(0);
    }
    100% {
        -webkit-transform: perspective(500px) translateZ(20px);
        transform: perspective(500px) translateZ(20px); /* perspective를 줘야 translateZ를 쓸 수 있음 */
    }
}

@keyframes slide-fwd-center {
    0% {
        -webkit-transform: perspective(0) translateZ(0);
        transform: perspective(0) translateZ(0);
    }
    100% {
        -webkit-transform: perspective(500px) translateZ(20px);
        transform: perspective(500px) translateZ(20px);
    }
}

transform 과 trasnsition 을 이용한 기본적인 애니메이션

transform : translate, scale, rotate... 함께 쓸수도 있음

• transform: scale(0.5) translate(-100%, -100%);
• transform: translate(30px, 20px) rotate(20deg);

transition transition: property duration timing-function delay;

• transition: margin-left 4s ease-in-out 1s;
• transition: margin-left 4s;

참고자료

• transform
• transition
• keyframes 활용 사이트