CSS_애니메이션

애니메이션

• transition, transform을 이용한 움직임처럼 나타나지만, 다른점은 조건만 맞으면 혼자 알아서 움직인다.
• transition이랑 같이 쓰지 말 것!
  같이쓰면 애니메이션이 이긴다. 혹은 충돌나서 오류로인해 둘 다 작동을 안할 수도 있다.
• 애니메이션이 다 동작하면 기존에 해놓은 css로 바뀐다.
• 필수 요소
  @keyframes : frame들의 집합체.
  • 애니메이션이 정해진 시간대에 맞춰 바뀌는 지점을 설정
  • 프레임의 개수가 많을수록 부드럽게 표현이 됨. (하지만 많이 만들진 않는다. )
  • ★ 재사용 가능. (한번만 사용가능한 것이 아니라 부르는데로 다 사용이 된다. )
  • 사용법 :

    @keyframes 이름{
    	0% {css속성들;}
        ...
        100% {css속성들;}
        ----------
        to {css속성들;}
        (숫자% 사용 가능)
        from {css속성들;}
    }

    to~from도 사용가능하나 대부분 숫자%를 사용한다.
    0~100% 사이에 많은 속성들 사용가능하다. (소숫점 4자리까지 줄 수 있다.)
  • css 속성은 하나씩만 주는 것이 좋다. 여러가지(위치도 옮기고 색도 바꾸고)주고 싶다면 keyframe을 하나 더 만들어서 각자 관리하는 것이 유지보수하기 좋다.
• 애니메이션 속성
  • animation-name: keyframes 이름으로 해당 요소에 애니메이션 연결
  • animation-duration: keyframes(애니메이션)을 동작시킬 시간
    • 단위 : 초(s)
  • animation-timing-function: 속도
    • ease(기본값), ease-in, ease-out, ease-in-out, linear
  • animation-delay: 지연
    • 최초의 애니메이션이 돌기 전! 최초의 딱 한번만 동작(기본값 0)
    • 애니메이션 동작하면 없는거나 마찬가지
    • 애니메이션 동작할때마다 delay를 주고 싶다면 keyframes의 %를 조정해야 한다.

    @keyframes move{
    	0% {transform: translateX(0);}
        50% {transform: translateX(0);}
        100% {transform: translateX(100px);}
     }

    위 코드는 0 ~ 50% 까지는 움직이지 않게하고, 50 ~ 100% 사이에만 움직이게 했다.
    그러면 duration 시간대중에 매 턴마다 절반의 시간동안은 움직이지 않는다.

    .loading_circle:nth-child(1){animation: loading 1s linear 0s infinite}
    .loading_circle:nth-child(2){animation: loading 1s linear 0.1s infinite}
    .loading_circle:nth-child(3){animation: loading 1s linear 0.2s infinite}
    .loading_circle:nth-child(4){animation: loading 1s linear 0.3s infinite}
    .loading_circle:nth-child(5){animation: loading 1s linear 0.4s infinite}
    .loading_circle:nth-child(6){animation: loading 1s linear 0.5s infinite}
    .loading_circle:nth-child(7){animation: loading 1s linear 0.6s infinite}
    .loading_circle:nth-child(8){animation: loading 1s linear 0.7s infinite}
    .loading_circle:nth-child(9){animation: loading 1s linear 0.8s infinite}
    .loading_circle:nth-child(10){animation: loading 1s linear 0.9s infinite}

    delay는 최초에 한 번 나온다는 것에 헷갈리면 안된다.
    한 번 delay를 주면 안준 circle에 비해서 영원히 느리게 된다.
    그리고 위 예제때문에 delay를 줄 때 10개 이상은 주지 않는다. 초 나눠주기 힘듬.
  • animation-iteration-count: 반복횟수
    • 단위 : 정수
    • infinite
    • animation-direction에서 alternate와 같이 쓸거면 infinite를 쓰거나 정수-짝수로 쓰기 (홀수로 쓰게 되면 100%지점에서 바로 원래 css로 돌아가니까 부자연스럽다. )
  • animation-direction: 방향성
    • nomal : (기본값) 0% -> 100% 지점으로 가는 것 (단방향)
    • alternate : 0% -> 100% 지점으로 갔다가 100% -> 0% 로 돌아오는 것 (양방향)
      • 100% -> 0%로 자연스럽게 가게 하기 위한 기능.
  • animation-fill-mode: 애니메이션이 끝나는 지점을 설정
    • none : 끝나면 원래꺼로 돌아감
    • forwards : 끝나는 지점에서 버팀 (원래꺼로 안돌아감)
      • iteration-count에 infinite를 쓰면 해당 속성은 의미가 없다.
    • (backwards : 안씀. )
  • ★한방코드 :
    animation : name duration timing-function delay iteration-count direction fill-mode
    만약 여러개 넣고 싶으면 transition이랑 똑같이 주면 된다. , 쓰고 name부터 쭉 쓰면 됨.

•   @keyframes buble {
      0%{transform: translate(-50%, -50%) scale(0);}
      50%{transform: translate(-50%, -50%) scale(5);}
      60%{transform: translate(-50%, -50%) scale(5);}
      100%{transform: translate(-50%, -50%) scale(10); opacity: 0;}
    }

  위와같이 중간에 opacity값을 명시하지 않는다면 그냥 0%일때 1 -> 100%일때 0으로 인식되니까 점점 투명해진다. 만약 중간까지는 불투명하게 보고 싶다면 꼭 명시해놔야한다.