animation : 애니메이션 속성

  animation : 애니메이션 속성

 

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

(종류)
1. animation : animation의 하위 속성들을 한꺼번에 선언할 때 사용합니다.

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

3. animation-direction : 애니메이션의 진행 방향을 설정합니다.
- alternate : from에서 to로 이동했다가 to에서 from으로 이동합니다.
- normal : 계속 from에서 to로 이동합니다.
- reverse : 역방향으로 움직입니다.
- alternate-reverse : 역방향으로 움직였다가 정방향으로 움직입니다.

4. animation-duration : 몇 초 동안 애니메이션을 진행할지 정합니다.

5. animation-iteration-count : 몇 번 애니메이션을 실행할지 지정합니다. infinite 값을 사용하면 무한반복합니다.

6. ★animation-name : 애니메이션의 이름을 지정합니다. 애니메이션은 이름이 없으면 실행 할 수 없습니다.

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

8. animation-timing-function : 수치변형함수로 가속도값을 지정합니다. 기본값은 ease 입니다.
- linear
- ease / ease-in / ease-out / ease-in-out

 

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

애니메이션의 시작 지점을 설정할 때 보통 해당 지점을 '키프레임' 이라고 합니다.
키프레임은 애니메이션이 변경되는 모든 지점들을 설정합니다.
키프레임 안에서 시간에 의해 변화되는 부분은 선택자로 지정할 수 있는데 애니메이션의 시작 위치를 from또는 0%로 선언하고, 애니메이션이 끝나는 지점을 to또는 100% 로 지정합니다. 만약 중간에 애니메이션의 흐름을 바꾸고 싶다면 50% 이런식으로 지정할 수 있습니다.

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

 

animation: 애니메이션 속성 html 작성 예시

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

 

animation: 애니메이션 속성 css 입력 예시

 <style>
      * {
        margin: 0;
        padding: 0;
      }

      .wrap {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 100%;
        background: linear-gradient(to right, #4bc0c8, #c779d0, #feac5e);
        /*애니메이션*/
        animation: rotate-circle;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        /* 순방향에서 역방향으로 
        animation-direction: alternate;*/
        /*무한 반복하기
         animation-iteration-count: infinite; */
      }

      .wrap:hover {
        animation-play-state: paused;
      }

      h2 {
        line-height: 200px;
        text-align: center;
        color: #fff;
      }

      @keyframes rotate-circle {
        /* 0초 */
        from {
          left: 0;
          transform: rotate(0deg);
        }
        /* 1초 */
        50% {
          border-radius: 0;
        }
        /* 2초 */
        to {
          left: 500px;
          transform: rotate(360deg);
        }
      }
    </style>

 

animation: 애니메이션 속성 적용해보기