[CSS] Animation / 웹사이트에 접속하자마자 효과 적용하기

Animation

.animation {
    animation-name: changeWidth;    /* 임의로 작성가능 */
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
}

@keyframes changeWidth {    /* 내가 설정한 animation 이름 */
    from { width: 300px; }    /* animation을 통해 변화할 결과값(시작지점) */
    to { width: 600px; }    /* animation을 통해 변화할 결과값(끝지점) */
}

iteration-count

• 애니메이션 반복 횟수

 

direction

• 애니메이션 진행 방향
  • alternate: from -> to -> from
  • normal : from -> to, from -> to
  • reverse: to -> from, to -> from