연습장

15. Animation 애니메이션 본문

CSS3

15. Animation 애니메이션

js0616 2024. 6. 29. 17:42

https://poiemaweb.com/css3-animation

 

CSS3 Animation | PoiemaWeb

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수

poiemaweb.com

 

 

애니메이션은 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.
transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 

 

 

Q. 어떤효과를 사용할 것인지?

 

transition : 단순히 요소의 프로퍼티 변화

animation : 하나의 줄거리를 구성하여 세부 움직임을 시간 흐름 단위로 제어 가능

 

 

Q. 애니메이션을 뭘로 구현할 것인지?

 

CSS : 비교적 작은 효과 , width 변경 등 애니메이션 

JavaScript : 세밀한 제어 ,  바운스-중지-일시중지-되감기-감속  같은 고급효과

 

 

일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다.  jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다.

 

중요한 것은 브라우저에서 애니메이션 효과가 부드럽게 실행되는 것과 효과 작성에 소요되는 시간과 수고이다.

 

1. @keyframes
@keyframes
CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다. 이 rule을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있다.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    /* @keyframes rule */
    @keyframes move {
      /* keyframe */
      from {
        left: 0;
      }
      /* keyframe */
      to {
        left: 300px;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 

애니메이션

 

 

 

 

 

@keyframes name : 애니메이션 임의의 이름 부여 'move'

from : 애니메이션의 시작

to : 애니메이션의 끝

 

from, to 키워드 대신 %를 사용할 수 있다. 또한 시작과 끝 키프레임 사이에 % 단위로 키프레임을 삽입할 수 있다.

 

 
@keyframes move {
    0%   { left: 0; }
    50%  { left: 100px; }
    100% { left: 300px; }
  }
 

2. animation-name


설정한 이름을 animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택한다. 하나 이상의 애니메이션 이름을 지정할 수 있다. 아래는 3개의 애니메이션 효과를 하나의 요소에 적용한 예제이다.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    .css_ex15_2  {
      position: absolute;
      width: 100px;
      height: 100px;
      color: white;
      text-align: center;
      line-height: 100px;
      animation-name: move, fadeOut, changeColor;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    @keyframes move {
      from { left: 0; }
      to   { left: 300px; }
    }
    @keyframes fadeOut {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    @keyframes changeColor {
      from { background-color: red; }
      to   { background-color: blue; }
    }
  </style>
</head>
<body>
  <div class="css_ex15_2 ">애니메이션</div>
</body>
</html>
애니메이션

 

 

 

 

 

3. animation-duration
한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

 

4. animation-timing-function
애니메이션 효과를 위한 수치 함수를 지정한다.

 

  • ease : 기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
  • linear : 시작부터 종료까지 등속 운동을 한다.
  • ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
  • ease-out : 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
  • ease-in-out : ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

 

5. animation-delay
요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

 

6. animation-iteration-count
애니메이션 주기의 재생 횟수를 지정한다. 기본값은 1이며 infinite로 무한반복 할 수 있다.

 

7. animation-direction
애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.

 

 

 

<!DOCTYPE html>
<html>
<head>
  <style>
    .css_ex15_3  {
      position: relative;
      width: 100px;
      height: 100px;
      color: white;
      text-align: center;
      line-height: 100px;


      animation-name: move;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    .normal{
      background-color: red;
      animation-direction: normal;
    }
    .reverse{
      background-color: orange;
      animation-direction: reverse;
    }
    .alternate{
      background-color: green;
      animation-direction: alternate;
    }
    @keyframes move {
      from { left: 0; }
      to   { left: 300px; }
    }
  </style>
</head>
<body>
  <div class="css_ex15_3 normal ">normal</div>
  <div class="css_ex15_3 reverse ">reverse</div>
  <div class="css_ex15_3 alternate ">alternate</div>
</body>
</html>
normal
reverse
alternate

 

 

 

 

 

 

8. animation-fill-mode
애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정한다.

 

 

 

9. animation-play-state
애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running이다.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    .css_ex15_4  {
      position: relative;
      width: 100px;
      height: 100px;
      color: white;
      text-align: center;
      line-height: 100px;
      background-color: red;


      animation-name: move;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
     
    }

    @keyframes move {
      from { left: 0; }
      to   { left: 300px; }
    }
    .stop:hover{
      background-color: blue;
      animation-play-state: paused;
    }


  </style>
</head>
<body>
  <div class="css_ex15_4 stop ">hover-stop</div>

</body>
</html>

 

hover-stop

 

 

 

 

10. animation
모든 애니메이션 프로퍼티를 한번에 지정한다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다.

 

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

 

name : none 

duration : 0

timing-function  : ease

delay : 0

iteration-count : 1

direction : normal

fill-mode : none

play-state : running

 

animation-duration은 반드시 지정해야 한다. 

지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다.

 

 

 

블로그 예제로 구현한 박스들의 위치가 맘대로 돌아다녀서 고민을 좀 했는데.. 

position : absolute 를 -> relative 로 변경하여 해결했다. 

 

 

 

 

'CSS3' 카테고리의 다른 글

17. Web Font 웹디자인 타이포그래피(Typography)  (0) 2024.06.29
16. Transform 트랜스폼  (0) 2024.06.29
14. Transition 트랜지션  (0) 2024.06.29
13. Gradient 그레이디언트  (0) 2024.06.29
12. Shadow그림자  (0) 2024.06.29
'CSS3' Related Articles more