[CSS] Animation

1. keyframes를 잡아준다

@keyframes loading-title{
    from{
        opacity: 100%;
    }

    to{
        opacity: 0;
    }
}

 

2. animation이 필요한 곳에 넣어준다.

.loading-title{
    font-size: 18px;
    line-height: 1.333;
    font-weight: 400;
    color: #151B26;
    margin-bottom: 20px;
    text-align: center;
    animation-name: loading-title;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.loading-title{
    font-size: 18px;
    line-height: 1.333;
    font-weight: 400;
    color: #151B26;
    margin-bottom: 20px;
    text-align: center;
    animation: loading-title 1000ms infinite ease-in-out alternate; //한 줄로도 가능!
}

animation-name	keyframes name
animation-duration	몇초동안 실행할지
animation-timing-function	움직임
animation-iteration-count	몇번 반복할지
animation-direction	애니메이션이 끝난 뒤 처음부터 시작하는 것이 아니라 reverse로 움직임(부드러운 움직임)