Programming/HTML CSS
CSS3의 변형속성을 사용하면 웹(web)에서 간단한 애니메이션(animation)을 구현할 수 있습니다. CSS3에서 사용할 수 있는 변형속성에는 다음과 같은 것들이 있습니다.

(1) transition-duration

지정한 시간(초)동안 속성에 대한 변형이 일어나도록 합니다. 확인을 위해 다음과 같이 div를 하나 생성하고
<div id="test_div">
  The cockpit of the A-10C contains three primary instrument panels that include gauges and indicators that display flight parameters, aircraft system states, engine state, control positions, and system warnings.
</div>
여기에 배경속성과 크기를 지정 후 :hover 를 사용해 마우스(mouse)를 올릴때의 이벤트(Event)를 걸어 배경색이 바뀌도록 하였습니다.
<style>
  #test_div {
   width: 500px;

   background-color: blue;
  }

  #test_div:hover {
   background-color: red;
  }
</style>
여기에 transition-duration 속성을 추가하여 2초동안 애니메이션(animation)이 적용되도록 하면 다음과 같이 처리할 수 있습니다.
#test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
 }
(2) transition-delay

이 속성은 일정시간 지연 후 속성에 대한 변형이 일어나도록 합니다.
 <style>
  #test_div {
   width: 500px;
   
   background-color: blue;
   transition-delay: 2s;
  }
  
  #test_div:hover {
   background-color: red;
  }
 </style>
위와 같이 속성을 지정하면 마우스(mouse)를 해당 div에 올리거나 내릴때마다 2초후에 배경색이 바뀔것입니다.

(3) transition-property

transition- 속성을 사용하여 애니메이션(animation)을 적용하면 지정된 모든 속성이 영향을 받게 됩니다. 예를 들어
  #test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
  }

  #test_div:hover {
   width: 1000px;
   
   background-color: red;
  }
위와 같은 경우 background-color과 widht가 transition 속성에 영향을 받을 것입니다. 이때 transition-property 속성을 사용하면 여러 속성 전체가 아닌 특정속성에만 transition 속성의 영향을 받을 수 있도록 지정할 수 있습니다.
 <style>
  #test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
   transition-property: background-color;
  }

  #test_div:hover {
   width: 1000px;
   
   background-color: red;
  }
 </style>
전체중 background-color 속성만 transition의 적용대상이 되도록 하였습니다. 다만 이 경우에도 만일 2가지 이상의 속성을 지정해야 하는 경우가 생기는데 이럴때는 transition-property: background-color, width; 처럼 ,를 사용해 구분하여 지정하면 됩니다.

(4) transition-timing-function

속성이 변경될때의 시간차에 대한 함수를 지정하는 속성입니다. 예를 들어 단순히 transition-duration: 2s 라고 했을때 기본값인 ease가 적용되 처음에는 느리게 가다가 점점 빠르게 진행되고 마지막 순간 다시 느려지는 다음 형태의 시간차가 적용될 것입니다.


만일 처음부터 끝까지 일정한 시간차로의 변형이 요구되는 경우라면 linear 형태가 알맞을 것이며 해당 속성을 다음과 같이 지정하면 됩니다.
#test_div {
   width: 500px;
   
   background-color: blue;
   transition-duration: 5s;
   transition-timing-function: linear;
}
특정 곡선이 아닌 임의의 시간차를 그릴 필요가 있다면 cubic-bezier 함수를 사용하면 됩니다.
transition-duration: 5s;
transition-timing-function: cubic-bezier(1,.01,.64,1);
참고로 cubic-bezier 함수에 담겨질 값은 http://cubic-bezier.com/ 사이트(site)를 이용하면 편리하게 생성할 수 있습니다.

(5) transition

transition-property 나 transition-delay 와 같은 속성을 일일이 따로 지정하지 않고 한꺼번에 모두 지정하고자 할때 transition 속성을 사용할 수 있습니다. transition의 구문 형식은 다음과 같습니다.

transition: <proerty> <duration> <function> <delay>;

예를 들어
transition: background-color 5s ease;
로 지정하는 경우 background-color 에 대해 5초동안의 ease시간차에 대한 애니메이션(animation)을 적용한다는 의미이며 delay로 인한 시간지연은 없음을 의미합니다.

transition 속성을 이용해서도 2가지 이상의 처리를 지정할 수 있는데 이 경우 ,(comma)를 사용해 각 설정을 구분하여 지정합니다.
transition: background-color 5s ease, width 5s ease 1s;
0 0