CSS_animation

Animation

• animation-name : @keyframes 애니메이션 이름 지정
  - 시작 : from or 0%
  - 중간 : 0 ~ 100 %
  - 끝 : to ~ 100%

• animation-duration : 애니메이션이 한 번 재생되는데 걸리는 시간을 지정 (단위 s)

• animation-delay : 애니메이션이 시작되기 전에 기다리는 시간을 지정 (단위 s)

• animation-iteration-count : 애니메이션 반복 횟수
  (default: 1, infinite: 무한반복)

• animation-timing-function : 애니메이션의 속도 변화를 지정
  -linear, ease, ease-in, ease-in-out 등등

• animation-direction : 애니메이션의 방향을 지정
  -normal(default), reverse(반대방향), alternate(반복될때마다 방향 바꿔 줌),
  alternate-reverse(반복될때마다)
  - alternate : from -> 방향으로 애니메이션 진행 -> (다음 회차)
  -> from 방향을 바꿔가며 반복

• 애니메이션 단축 프로퍼티
  animation: [name][duration] [timing-function][delay] [iteration-count];

• Tip)
  *from에서 to로의 애니메이션 (정방향 애니메이션)( from~to)

  -to는 애니메이션의 종료 상태를 나타낸다
  이러한 경우 애니메이션은 from상태에서 시작하여 to 상태로 종료한다

  *to에서 from으로의 애니메이션 (역방향 애니메이션)(to~from)

  -to는 애니메이션의 시작 상태를 나타냅니다
  -from은 애니메이션의 종료 상태를 나타냅니다
  이러한 경우 애니메이션은 to 상태에서 시작하여 from 상태로 종료합니다

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: relative;

    animation-name: damon;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

/* damon : 애니메이션의 이름 (개발자 마음대로) */
@keyframes damon {
    0% {
        left: 0px;
    }

    25%{
        left: 200px;
    }

    50%{
        left: 400px;
    }

    75%{
        left: 200%;
    }

    100%{
        left: 0px;
    }

}

@keyframes bounce2 {
    from, to{
        bottom: 0px;
        animation-timing-function: ease-out;
        /* 마지막에 천천히 속도를 줄여서 끝남 
            0px에서 정상속도로 시작 -> 속도 줄이면서 300px이 된다
        */
    }

    50%{
        bottom: 300px;
        animation-timing-function: ease-in;
        /* 300px에서 천천히 시작되어 -> 0ox 가면서 정상속도 */
    }

    /*
    같은 내용은 생략해서 from to 같이 작성
    
    to{
        bottom: 0px;
        animation-timing-function: ease-out;
    } 
        
    */


}