국비지원 23일차 (animation)

 

※Animation css속성

 

애니메이션: 트랜지션과 트랜스폼을 이용한 움직임처럼 나타나지만, 다른 점은 조건만 맞으면 혼자 알아서 돌아간다.
*transition과 같이 상용하지 말 것

 

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

- 애니메이션 속성 -
     1) animation-name: keyframes 이름으로 해당 요소에 애니메이션 연결
     2) animation-duration: keyframes(애니메이션)을 동장 시킬 시간
                      단위 - 초(s)
     3) animation-timing-function: 속도
                      ease, ease-in, ease-out, ease-in-out, linear
     4) animation-delay: 지연
                      최초의 애니메이션이 돌기 전에만 딱 한번 동작
                      (애니메이션 동작하면 없는 거나 마찬가지)
     5) animation-iteration-count: 반복 횟수
                      단위 - 정수
                       infinite(무한)
                      *6번(direction)에서 alternate와 같이 쓸 거면 infinite를 쓰거나
                       정수로 쓸 때는 짝수로 쓰기
     6) animation-direction: 방향성
                       normal: 기본값, 0% 지점에서 100% 지점으로만 가는 거
                       alternate: 100% 까지 갔다가 0%로 돌아오는 거
     7) animation-fill-mode: 애니메이션이 끝나는 지점을 설정
                       none(끝나면 원래 거로 돌아감)
                       forwards(끝나면 원래꺼로 안 돌아감)
                       *5번(iteration-count)에서 infinite 랑 같이 못씀

     *한방
      animation: name duration timing-function delay iteration-count direction fill-mode;

 

 

이미지 결과값.

※ box클래스에 animation효과주기

 

1.. box를 만들어주고 , css효과에 animation을 주는 걸 연습을 하였다.

 

2.. box에  width *height (100px * 100px) 적용한 박스를 만들어주었다.

 

3. animation을 box에 적용시키기 위해

@keyframes (animation명칭) {

    0% {0% 즉, 처음에 css 속성들 중 얼마를 어떻게 줄 것인지 }

    100% {100% 즉, 마지막에 css속성들 중  얼마를 어떻게 줄 것인지}

    } 이렇게 animation 효과를 적용시키기 위해 keyframes라는 걸 선언해 주어야 된다.

 

4. 위에 박스를 색깔이랑 움직임을 주어서 박스를 움직여볼 것이다.

@keyframes  bg_color { (색을 입히는 애니메이션)

    0% { background-color :red;} -먼저 red를 입혀주고 100% 센트 (마지막에) blue를 입혀준다.

    100% {background-color :blue;}

    }.

 

@keyframes move  { (위치를 이동시키는 애니메이션)

    0% {transform: translateX(0)} -0%(처음에) 자기 크기에서 0  그대로 위치하고

    100% {transform: translateX(30px)} 100%(마지막에) x방향으로 30px 움직여라.

    } 

 

5.. box css에

animation-name: bg-color, move; -> 이렇게 keyframes에서 만든 animation 명을 여러 개 입력해 적용가능하다.

animation-duration: 0.3s , 1s; -> bg-color에 0.3초 move에 1초 의 속도를 적용해라

animation-timing-function: ease; -> ease 그냥 기본값인데 거의 안 쓰긴 하는 속성이다. 일정속도로 진행시키는 걸 말한다.

animation-delay:5s; ->지연해주는 거다, 근데 애니메이션은 최초의 1번만 적용시켜 준다 2번째 애니메이션 진행 시 적용 안된다.

animation-iteration-count: infinite ; -> 반복 횟수, infinite는 무한대로 계속 반복을 해준다는 이야기다.

animation-direction: alternate ; -> 방향성, alternate는 100% 끝까지 적용됐다가 다시 0% 로 돌아와서 시작하는 거다

animation-fill-mode: forwards ; -> 애니메이션 끝지점 설정, foreards (끝나면 원래 거로 안 돌아가는 건데) 보통 infinite 랑 같이 쓰면 forwards는 무시돼서  같이 안 쓴다고 한다.

 

위와 같이 설정하면 색은 0.3초 의 속도로 무한 반복 될 것이고 , 위치는 1s속도로 오른쪽으로 x방향으로 30px이동했다가 다시 0px로 이동하는 효과를 무한반복될 것이다.

 

 

                                  

 

 

@더 알아가기

- transition 은 hover나 checked 시 동작함, animation 은 조건만 맞으면 혼자 알아서 돌아간다. 둘이 같이 못쓰고 같이 적게 되면 animation효과가 대부분 적용된다.

- iteration-count 쓸 때는 짝수 아니면 infiniter로만 쓰자 , 홀수로 숫자 적용하면 부자연스럽게 나올 가능성이 많다.

-일정시간 delay 주려면 보통 animaition에도 delay 속성이 있지만 animation효과가 한번 끝나고 나면 그다음은 적용 안되기 때문에 일정간격으로 delay주려면 @keyframes에 0% 50% 100% 이렇게 퍼센트를 나누어 서 쓰고 0%,50% 안에 똑같은 '0' 값을 입력 시 0~50% 까지 걸리는 시간은 처음 그대로 모습으로 적용되고 50%~100% 에 해당하는 값만 적용되기에  delay를 준효과를 낼 수 있다.