transform, transition, animation

• 간단한 애니메이션 효과를 만들 때조차 자바스크립트를 사용해야 했으나 CSS3 등장으로 디자인과 기능적인 부분을 쉽게 표현할 수 있게됨
• transform
  • 선택된 태그의 각도를 조정하고 크기를 변경하고 위치를 옮길 때 사용함
  • rotate, scale, skew, translate 등의 속성값이 존재함
  • transform: rotate(각도deg);
    • 선택된 태그의 각도를 평면적으로 조정함
    • 0~360 범위에서 선택, 양수일때 시계 방향, 음수일때 시계 반대 방향으로 회전함
  • transform: scale(width, height);
    • 선택된 요소의 크기를 비율로 조정함 
    • 원본 크기를 숫자 1을 기준으로 1보다 크면 확대, 작으면 축소함
  • transform: skew(x, y);
    • 선택된 태그의 각도를 입체적으로 조정함
    • x, y축을 기준으로 각도만큼 공간이 왜곡됨
  • transform: translate(x, y);
    • 선택된 요소를 x축이나 y 축으로 이동시킬때 사용함
    • margin과 padding속성 외에도 translate속성을 사용하여 배치 작업을 진행하는 경우도 있음

 

• transition
  • 특정 조건에 따라 상태가 변하는 것을 뜻함
  • 특정 조건으로 보통 마우스 포인터를 올렸을 때를 의미하며 색상이나 크기 등과 같은 속성이 변함

  • #transition {
        /* 변화를 주려는 CSS 속성 */
        transition-property: width;
        /* 변화가 일어나는 시간 */
        transition-duration: 3s;
        /* 변하는 속도 */
        transition-timing-function: else;
        /* 변화가 시작되는 시간을 지연 */
        transition-delay: 1s;
    }
    
    /* hover: 마우스를 올렸을 떄를 의미하는 가상 클래스 */
    #transition:hover {
        width: 600px;
    }

  • transition: width 3s ease 1s; 한 줄로도 표현이 가능함
  • transition-timing-function 속성의 주요 속성값

    • linear	시작 지점부터 종료 지점까지 같은 속도로 변함
      ease	초반은 느리게, 중반은 빠르게, 종반은 느리게 변함
      ease=in	시작 지점의 변화가 천천히 진행됨
      ease-out	종료 지점의 변화가 천천히 진행됨
      ease-in-out	시작 지점과 종료 지점의 변화가 천천히 진행됨

 

• animation
  • 웹 사이트에 다양한 애니메이션 효과를 적용할 때 사용함
  • 크기, 위치, 회전, 배경색 등 CSS 언어가 제공하는 대부분의 속성에 시간과 방향을 지정하여 애니메이션 효과를 만듬

  • #animation {
        /* 적용할 애니메이션의 이름을 지정 */
        animation-name: changeWidth;
        /* 애니메이션이 from~to로 동작하는데 걸리는 시간 */
        animation-duration: 3s;
        /* 애니메이션 재생 횟수, infinite로 지정시 계속 재생 */
        animation-iteration-count: 6;
        /* 속도의 가속과 감속 설정 */
        animation-timing-function: ease;
        /* 애니메이션 진행 방향 */
        animation-direction: alternate;
        /* 애니메이션 동작하는 시간을 지연 */
        animation-delay: 2s;
    }
    
    /* 애니메이션 효과를 지정하는 공간 */
    @keyframes changeWidth {
        from { width: 300px; }
        to { width: 600px; }
    }
    
    /*
    @keyframes changeWidth {
        0% { width: 300px; }
        50% { background-color: red; }
        100% { width: 600px; }
    }
    */

  • animation-direction의 주요 속성값

    • nomal	from -> to
      reverse	to -> from
      alternate	from -> to -> from
      alternate-reverse	to -> from -> to