@keyframes 사용하기

• 웹사이트에 다양한 애니메이션 효과를 부여하고 싶다면, keyframes을 사용할 수 있다.

@keyframes appear {
    from {
        margin-top: 10px;
        opacity: 0;
    }
    to {
        margin-top: 0px;
        opacity: 1;
    }
}

.btn-img {
    animation: appear 1s;
}

• 또는 프레임을 더 세분화하여 나타낼 수 있다.

@keyframes appear {
    0% {
        margin-top: 10px;
        opacity: 0;
    }
    30% {
    	margin-top: -10px;
        opacity: 0.5;
    }
    70% {
        margin-top: 10px;
        opacity: 0.9;    	
    }
    100% {
        margin-top: 0px;
        opacity: 1;
    }
}

.btn-img {
    animation: appear 1s;
}

• animation 속성에는 키프레임 이름, 지속시간, easing-function, 딜레이, 반복 횟수, 방향 등을 설정할 수 있다.

• animation: appear 1s infinite; 와 같이 설정하여 애니메이션이 무한히 반복되게 할 수 있다.

• 애니메이션을 멈추고 싶다면, 다음과 같이 스타일을 작성할 수 있다.

animation-play-state: paused;
-webkit-animation: none;

참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes, https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations, https://developer.mozilla.org/ko/docs/Web/CSS/animation