[HTML5 & CSS3] 애니메이션

▶ 애니메이션

​

*CSS와 애니메이션

CSS3의 animation 속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. CSS 애니메이션은 시작해서 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다는 점으느 트랜지션과 다르다. 이 때 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 부른다.

​

속성	설명
@keyframes	애니메이션이 바뀌는 지점을 설정한다.
animation-delay	애니메이션 지연 시간을 지정한다.
animation-direction	애니메이션 종료 후 처음부터 시작할지, 역방향으로 진행할지를 지정한다.
animation-duration	애니메이션 실행 시간을 설정한다.
animation-fill-mode	애니메이션이 종료되었거나 지연되어 애니메이션이 실행되지 않는 상태일 때 요소의 스타일을지정한다.
animation-iteration-count	애니메이션 반복 횟수를 지정한다.
animation-name	@keyframes로 설정해 놓은 중간 상태의 이름을 지정한다.
animation-play-state	애니메이션을 멈추거나 다시 시작한다.
animation-timing-function	애니메이션의 속도 곡선을 지정한다.
animation	animation 하위 속성들을 한꺼번에 묶어 지정한다.

​

​

​

*@keyframes 속성 - 애니메이션 지점 설정하기

애니메이션 시작 지점을 키프레임이라고 한다. 애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다.

​

기본형)

@keyframes <이름> { <선택자> { <스타일> } }

 

사각형에서 원으로 서서히 바뀌는 애니메이션

<style>
   div {
      width: 100px;
      height: 100px;
      background-color: blue;
      -webkit-animation-name: change-bg;
      -moz-animation-name: change-bg;
      -o-animation-name: change-bg;
      animation-name: change-bg;
      -webkit-animation-duration: 3s;
      -moz-animation-duration: 3s;
      -o-animation-duration: 3s;
      animation-duration: 3s;
   }
   
   @keyframes change-bg {
      from { /* 애니메이션 시작 시점 스타일 */
         background-color: blue;
         border: 1px solid black;
      }
      
      to { /* 애니메이션 끝 시점 스타일 */
         background-color: #a5d6ff;
         border:1px solid blue;
         border-radius: 50%;
      }
   }
</style>

 

​

​

*animation-name 속성 - 애니메이션 이름 지정하기

CSS로 애니메이션을 만들 때 @keyframes 속성을 이용해 여러 개의 애니메이션을 정의하는데 animation-name 속성에서 지정한 애니메이션 이름으로 구분한다. 이 animation-name 속성을 사용하면 왼쪽 소스로 정의한 애니메이션을 오른쪽 소스처럼 animation-name 속성에 change-bg라는 값을 적용해 사용할 수 있다.

​

기본형)

animation-name: <키프레임 이름> | none

 

@keyframe을 사용해 실행할 애니메이션 지정하기

<style>
   #box1 {
      background-color: #4cff00;
      border: 1px solid black;
      -webkit-animation-name: shape;
      -moz-animation-name: shape;
      -o-animation-name: shape;
      animation-name: shape;
      -webkit-animation-duration: 3s;
      -moz-animation-duration: 3s;
      -o-animation-duration: 3s;
      animation-duration: 3s;
   }
   #box2 {
      background-color: #8f06b0;
      border: 1px solid black;
      -webkit-animation-name: rotate;
      -moz-animation-name: rotate;
      -o-animation-name: rotatboxe;
      animation-name: rotate;
      -webkit-animation-duration: 3s;
      -moz-animation-duration: 3s;
      -o-animation-duration: 3s;
      animation-duration: 3s;
   }
   @keyframes shape { /* 모양이 바뀌는 애니메이션 */
      from {
         border: 1px solid black;
      }
      to {
         border: 1px solid black;
         border-radius: 50%;
      }
   }
   @keyframes rotate { /* 회전하는 애니메이션 */
      from {
         transform:rotate(0deg)
      }
      to {
         transform: rotate(45deg);
      }
   }
</style>

 

​

​

*animation-duration 속성 - 애니메이션 실행 시간 설정하기

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

​

기본형)

animation-duration: <시간>

 

​

​

*animation-direction 속성 - 애니메이션 방향 지정하기

기본적으로 애니메이션이 한 번 실행되면 원래 위치로 되돌아가는데 animation-direction 속성을 이용하면 원래 위치로 되돌아가거나 반대 방향으로 애니메이션을 한 번 더 실행할 수 있다.

속성 값	설명
normal	애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아간다.
alternate	애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행한다.

​

​

​

*animation-iteration-count 속성 - 반복 횟수 지정하기

기본적으로 애니메이션은 한 번만 실행하고 끝나는데, 반복 실행할 수도 있다. 그럴때 animation-iteration-count 속성을 사용해 반복 횟수를 지정할 수 있다.

무한 반복하는 애니메이션 만들기

<style>
   .box {
      margin-top: 50px;
      margin-left: 100px;
      padding: 20px;
      height: 60px;
      -webkit-animation-name: moving;
      -moz-animation-name: moving;
      -o-animation-name: moving;
      animation-name: moving;
      -webkit-animation-duration: 3s;
      -moz-animation-duration: 3s;
      -o-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-direction: normal;
      -moz-animation-direction: normal;
      -o-animation-direction: normal;
      animation-direction: normal; /* 애니메이션이 끝난 후 반대 방향으로 실행하지 않음 */
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
      animation-iteration-count: infinite; ​/* 애니메이션이 끝난 후 무한 반복함 */
   }
​
   @keyframes moving {
      from {
         width: 200px;
         background: #faef7c;
         opacity: 0.5;
         transform: scale(0.5) rotate(15deg);
      }
      to {
         width: 400px;
         background: #ff9400;
         opacity: 1;
         transform: scale(1) rotate(0deg);
      }
   }
</style>

<body>
<div class="box">
<h3>CSS3 Animation</h3>
</div>
</body>

 

​

​

*animation-timing-function 속성 - 애니메이션 속도 곡선 지정하기

트랜지션과 마찬가지로 애니메이션에서도 애니메이션의 시작과 중간, 끝에서의 속도를 선택해 전체적인 속도 곡선을 지정할 수 있다.

​

기본형)

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

​

​

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

길고 복잡한 애니메이션 관련 속성들도 animation 속성을 사용하면 간단히 한 줄로 표기할 수 있다.

이렇게 간략히 표기해 기본 값을 사용하더라도 animation-duration 속성 값은 반드시 표기해야 한다. 애니메이션 실행 시간을 지정하지 않으면 기본 값 0이 적용되어 애니메이션 효과를 볼 수 없기 때문이다.

​

기본형)

animation : <animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> | <animation-iteration-count> | <animation-direction>

 

두 개 이상의 애니메이션 동시에 실행하기

<style>
   .box {
      width: 60px;
      height: 60px;
      margin: 60px;
      -webkit-animation: rotate 1.5s infinite, background 1.5s infinite alternate;
      -moz-animation: rotate 1.5s infinite, background 1.5s infinite alternate;
      -o-animation: rotate 1.5s infinite, background 1.5s infinite alternate;
      animation: rotate 1.5s infinite, background 1.5s infinite alternate;
   }
​
   @keyframes rotate { /* 중간(50%)에 x축 기준으로 회전하고 끝날 때(100%) y축 기준으로 회전한다 */
      from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
      50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
      to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
   }
​
   @keyframes background { /* 처음에는 빨간색 배경이었다가 중간에 초록색으로 바뀐 후 끝날 때는 파란색 배경 */
      from { background: red; }
      50% { background-color: green }
      to { background-color: blue; }
   }
</style>
</head>
​
<body>
<div class="box"></div>
</body>