[CSS] animation 애니메이션 속성

 animation 애니메이션 속성

:움직임(모션효과)을 만드는 속성.
해당 속성을 적용하면 해당 html 페이지가 로드되었을 때 바로 시작한다.

from : 시작지점  to : 끝나는 지점을 말한다. 

animation:	아래 속성들을 한꺼번에 선언
animation-delay: 0s;	~초동안 지연시킴 / 이벤트 발생 또는 페이지 로드 후 몇 초 뒤에 애니메이션을 실행할지 결정
animation-direction:	애니메이션의 진행방향 / alternate : 왕복 / normal: from에서 to로 띡띡  계속 이동
animation-duration:0s;	~초동안 애니메이션을 진행시키겠다.
animation-iteration-count:	몇 번 애니메이션을 진행할지 결정 / animation-iteration-count: infinite 무한반복 / 혹은 숫자 삽입
animation-name:	애니메이션 이름을 정한다. 이름 안정해주면 애니메이션을 실행할 수 없다.
animation-play-state:	애니메이션을 재생할지 멈출지를 지정. / animation-play-state:  paused 는 멈추다.
animation-timing-fuction:	가속도값을 지정 / linear 같은 속도로 움직임 / ease: 천천히 시작해서 빨라졌다가 천천히 끝남.

 @keyframes 모듈 : 애니메이션이 변경되는 시점을 설정함. 

 @keyframes 애니메이션이름 {
    from{ css속성:값; } 

    to{ css속성:값; }
    }

---

 
[종류]

1. animation

: animation의 하위 속성들을 한꺼번에 선언할 때 사용함. (html에 치면 아래와 같이 순서가 나타난다)

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

2. animation-delay

: 이벤트 발생(사용자의 행위) 또는 페이지 로드 후 몇 초 뒤에 애니메이션을 실행할지 결정함.
단위는 초(s)를 사용한다.

3. animation-direction

: 애니메이션의 진행 방향을 설정한다.

 

    - alternate : from에서 to로 이동했다가 to에서 from으로 이동함. 왕복
    - noraml : 계속 from에서 to로 이동 다시 돌아오지않고 계속 띡띡 이동함 기본값. 
    - reverse : 역방향으로 움직인다. 
    - alternate-reverse : 역방향으로 움직였다가 정방향으로 움직임.

4. animation-duration

: 몇 초 동안 애니메이션을 진행할 것인지 설정. 

5. animation-iteration-count

:  몇 번 애니메이션을 실행할지 지정함. infinite 값을 사용하면 무한반복함.

숫자나 infinite 값을 쓴다. 

 

6. animation-name

: 애니메이션의 이름을 지정함.

★ 애니메이션은 이름이 없으면 실행할 수 없다. 

 

7. animation-play-state

: 애니메이션을 재생할지 멈출지를 지정함. 보통 hover 선택자와 함께 사용함.
기본값은 재생으로, 애니메이션을 멈추고 싶을땐 paused 값을 이용함. 

 .wrap:hover {

        animation-play-state: paused;

      }

= 마우스를 올리면 멈춰라

8. animation-timing-function

:  수치변형함수로 가속도값을 지정함. transtion에 썼던 속성값 고대로 이용한다. 기본값은 ease이다. 

   - linear : 시작부터 끝까지 같은 속도로 트랜지션을 진행한다. ☆
   - ease : 처음에는 천천히 시작해서 점점 빨라지며 마지막에는 천천히 끝낸다. 기본값.☆
   - ease-in : 맨 처음 시작을 느리게 함. 
   - ease-out : 마지막을 천천히 끝냄.
   - ease-in-out : 느리게 시작해서 느리게 끝냄

 

★ @keyframes 모듈 : 애니메이션이 변경되는 시점을 설정함. 

: 애니메이션의 시작 시점을 설정할 때 보통 해당 지점을 '키프레임'이라고 한다.

키 프레임은 애니메이션이 변경되는 모든 지점들을 설정한다. 
 키프레임 안에서 시간에 의해 변화되는 부분은 선택자로 지정할 수 있는데

애니메이션의 시작 위치를 from 또는 0%로 선언하고, 애니메이션이 끝나는 지점을 
to 또는 100%로 설정한다. 만약 중간에 애니메이션의 흐름을 바꾸고싶다면 50% 이런 식으로 지정할 수 있다. 

    [기본형]
    @keyframes 애니메이션이름 {
    from{ css속성:값; } 50%{ css속성:값; } to{ css속성:값; }
    }

 

@keyframes rotate-circle {

        /* 0초지점 */

        from {

          left: 0;

          transform: rotate(0deg);

        }

        /* 시간의 중간지점 */

        50% {

          border-radius: 0;

          background: #6be585;

        }

        /* 끝나는 시간 지점 */

        to {

          left: 500px;

          transform: rotate(360deg);

        }

      }

---

 <div class="wrap">
      <h2>animation</h2>
    </div>

.wrap {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 100%;
        background: linear-gradient(to right, #6be585, #dd3e54);
        /* 애니메이션 속성 */
        animation-name: rotate-circle;
        animation-duration: 2s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .wrap:hover {
        animation-play-state: paused;
      }
      .wrap h2 {
        line-height: 200px;
        text-align: center;
        color: #fff;
      }
      @keyframes rotate-circle {
        /* 0초지점 */
        from {
          left: 0;
          transform: rotate(0deg);
        }
        /* 시간의 중간지점 */
        50% {
          border-radius: 0;
          background: #6be585;
        }
        /* 끝나는 시간 지점 */
        to {
          left: 500px;
          transform: rotate(360deg);
        }
      }