Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nomad-programmer

[Programming/HTML|CSS] 애니메이션 속성 본문

Programming/HTML|CSS

[Programming/HTML|CSS] 애니메이션 속성

scii 2020. 8. 7. 00:03

트랜지션 속성은 한 스타일에서 다른 스타일로 바뀔 때 진행 시간을 지정해서 부드럽게 변화하도록 한 것이다.
따라서 트랜지션을 잘 활용해도 부드러운 애니메이션 효과를 만들 수 있다. 하지만 animation 속성을 이용하면 트랜지션보다 애니메이션을 더 쉽게 만들 수 있다.

animation

animation 속성과 transition 속성

animation 속성과 transition 속성은 비슷한 점이 많다. 시작 스타일과 끝나는 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가하여 전체적으로 부드럽게 변화하는 애니메이션 효과를 만들어낸다.

animation 속성은 애니메이션에 소요되는 시간이나 지연 시간 등을 지정하는 것은 transition 속성과 같지만, 애니메이션의 시작에서부터 끝날 때까지 어느 지점이든 @keyframes 속성을 사용해 애니메이션을 정의할 수 있다는 점은 트랜지션과 다르다.

animation-duration 속성 : 애니메이션 실행 시간

animation-duration 속성은 애니메이션을 얼마 동안 재생할 것인지 설정한다. 사용할 수 있는 값을 초(s)나 밀리초(ms)로 표시한 시간 값이다. 
기본 값은 0이기 때문에 animation-duration 속성 값을 정하지 않으면 애니메이션은 일어나지 않는다.

예를 들어, 애니메이션 진행 시간을 1초로 지정하려면 다음과 같이 작성한다.

animation-duration: 1s;

animation-name 속성

CSS로 애니메이션을 만들 때 @keyframes 속성을 이용해 여러 개의 애니메이션을 정의할 수 있는데, 특정 요소에 어떤 애니메이션을 적용할 것인지 정의하는 속성이 animation-name 속성이다.

예를 들어, @keyframes 속성을 이용해 ani라는 애니메이션을 지정했다면 그 애니메이션을 사용할 때는 다음과 같이 한다.

/* ani라는 이름의 애니메이션 정의 */
animation-name: ani;

@keyframes 속성을 이용해 애니메이션을 정의할 때는 두 가지 이상의 상태를 설정해야 한다. 즉, 애니메이션이 시작할 상태와 애니메이션이 끝날 때의 상태를 설정해야 시작 상태에서 끝나는 상태까지 자연스럽게 애니메이션을 만들 수 있다.

상태 스타일을 정의할 때 애니메이션 시작에서 끝날 때까지를 100%라고 보고, 시작할 때의 상태는 0%, 스타일을 정의하고 끝나는 상태는 100% 스타일을 정의한다.

0%스타일과 100%스타일은 from과 to라는 키워드를 사용해도 된다.
#myanim {
	/* 애니메이션 이름 */
    animation-name: ani;
    
    /* 3초 동안 애니메이션 */
    animation-duration: 3s;
    
    /* webkit, moz 브라우저를 위한 */
    -webkit-animation-name: ani;
    -webkit-animation-duration: 3s;
    -moz-animation-name: ani;
    -moz-animation-duration: 3s;
    
@keyframes ani {
	/* 시작할 때 x좌표 위치 10px */
	0% { left: 10px; } 
    
    /* 끝날 때 x좌표 위치 400px */
    100% { left: 500px; }
}

@-webkit-keyframes ani...
@-moz-keyframes anim...

animation-iteration-count 속성 : 반복 횟수 지정

애니메이션은 기본적으로 한 번만 실행하고 끝난다. 경우에 따라서는 애니메이션을 반복해야 할 경우가 있는데, 그럴 때는 animation-iteration-count 속성을 사용해 반복 횟수를 지정할 수 있다. 이 속성에서 사용할 수 있는 값은 반복 횟수를 나타내는 숫자나 무한 반복을 나타내는 infinite라는 키워드이다.

예를 들어, 애니메이션을 무한 반복하고 싶다면 다음과 같이 지정한다.

animation-iteration-count: infinite;

animation-direction 속성 : 애니메이션 반대 방향으로 실행

한쪽 방향으로 애니메이션이 실행되고 나면 기본으로 원래 위치로 돌아가지만, animation-direction 속성을 이용하면 애니메이션의 방향을 조절할 수 있다.

이 속성에서 사용할 수 있는 값은 normal과 alternate이다. 
normal은 애니메이션을 실행하고 원래 위치로 돌아가는 것이며 기본 값이다.
alternate는 애니메이션을 실행했던 반대 방향으로 애니메이션을 역실행하는 것이다.

예를 들어, 왼쪽에서 오른쪽으로 이동하는 애니메이션을 사용하려고 할 경우 다음과 같이 지정하면 애니메이션이 오른쪽에서 끝나자마자 다시 반대 방향인 왼쪽으로 이동한다.

/* 애니메이션 끝난 후 반대 방향으로 실행 */
animation-direction: alternate;

animation 속성 : 애니메이션 관련 속성 한꺼번에 표기

각 속성마다 브라우저 접두사까지 붙이고 나면 애니메이션 관련 속성들만으로도 한참 긴 소스가 될 것이다. animation 속성을 사용하면 필요한 애니메이션 속성들을 한 줄로 표기할 수 있다.

애니메이션 속성을 사용할 때 animation-duration 속성은 반드시 표기해야 한다. 애니메이션 실행 시간을 지정하지 않으면 기본 값 0이 적용되어 애니메이션 효과를 볼 수 없다. 
다음 기본 형에 나열된 속성 값 순서대로 값을 입력한다.

animation: name 값 | duration 값 | timing-function 값 | delay 값 | iteration-count direction 값;

animation 속성 : 애니메이션 재생/중지

애니메이션을 중지하고 재생할 때 사용하는 속성이다.

animation-name

선택한 요소에 적용할 애니메이션 이름을 지정

animation-duration

애니메이션 실행 시간. 초나 밀리초로 값을 지정

animation-timing-function

애니메이션에서 사용할 곡선의 형태를 선택. 기본 값은 ease이다. 속성 값은 transition-timing-function 값과 동일

animation-delay

애니메이션 지연 시간을 지정. 초나 밀리초 단위를 사용

animation-iteration-count

애니메이션 반복 횟수를 지정. 숫자나 infinite 키워드를 사용

animation-direction

애니메이션 실행 방향을 지정. normal이나 alternate를 사용

animation-play-state

애니메이션 재생 상태를 지정

다음은 예제에 사용한 소스 코드이다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="prefix-free/prefixfree.min.js"></script>
    <title>Document</title>
    <style>
      body {
        background-color: #333333;
        color: white;
        min-width: 760px;
      }
      * {
        margin: 0px;
        padding: 0px;
      }
      body {
        position: relative;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        text-align: center;
        background: linear-gradient(#cb60b3 0%, #db36a4 100%);
        animation-name: rint;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;

        /* animation: rint 2s linear none infinite alternate; */
      }
      #box > h1 {
        line-height: 200px;
      }
      #box:hover {
        animation-play-state: paused;
      }
      @keyframes rint {
        from {
          left: 0px;
          transform: rotate(0deg);
        }
        50% {
          left: 500px;
        }
        to {
          left: 500px;
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="box">
      <h1>Rotation</h1>
    </div>
  </body>
</html>
저작자표시 비영리 변경금지

'Programming > HTML|CSS' 카테고리의 다른 글

[Programming/HTML|CSS] 많이 사용하는 StyleSheet 초기화 코드  (0) 2020.12.18
[Programming/HTML|CSS] 중요한 레이아웃 공식 같은 CSS설정  (0) 2020.08.11
[Programming/HTML|CSS] 동위 선택자의 활용 예시  (0) 2020.08.10
[Programming/HTML|CSS] 웹 개발할 때 유용한 사이트 모음  (0) 2020.08.10
[Programming/HTML|CSS] 브라우저 간의 차이를 메꿔주는 폴리필(polyfill)  (0) 2020.08.02
'Programming/HTML|CSS' Related Articles more
Comments