[Css] 전환 변형 - 트랜지션과 애니메이션, 트랜스폼

CSS 변형 효과

• 전환(transition)은 CSS 스타일 변경을 부드럽게 표현하기 위해 지속시간을 부여하여 속도를 조절한다.
• 애니메이션(animation)은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.
• 변형(transform)은 요소에 이동, 회전, 확대축소, 비틀기 효과를 부여하기 위한 함수를 제공한다.

 

전환(transition)이란?

• 전환 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다.

선택자 {
    transition: 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음
    transition-property: 트랜지션의 대상이 되는 속성 지정
    transition-duration: 전환 효과가 지속될 시간
    transition-timing-function: 전환 효과의 시간당 속도
    transition-delay: 전환 효과가 나타나기 전까지의 지연 시간
}

transition 속성

• transition 속성은 1. 해당 요소에 추가할 CSS 스타일 전환 효과를 설정하고, 2. 전환 효과가 지속될 시간을 설정하여 정의한다.
• 지속 시간의 기본값은 0초이므로, 효과가 지속될 시간을 명시하지 않으면 아무런 효과도 나타나지 않는다.

transition: property duration function delay

/* 마우스를 올려놓으면 해당 요소의 너비가 1초 동안 3배로 늘어남 */
div.keyboard {
    width: 100px;
    transition: width 1s;
}

div.keyboard:hover { width: 300px; }

transition-duration 속성

• transition-duration 속성은 전환 효과가 일어나는 지속시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정하며, 속성을 지정하지 않으면 기본값 0s이 적용되어 어떠한 전환 효과도 볼 수 없다.

div {
    width: 100px;
    height: 50px;
    background-color: red;
    margin-bottom: 10px;
    /* width, left는 2초이고 opacity, top은 1초 */
    transition-property: width, opacity, left, top;
    transition-duration: 2s, 1s;
}

div:hover {
    width: 300px;
    background-color: blue;
    transition: all 3s;      /* 마우스가 올라갈때만 3초에 걸쳐 전환 */
}

transition-timing-function 속성

• transition-timing-function 속성은 전환 효과의 시간당 속도를 설정한다.
  • linear: 전환 효과가 처음부터 끝까지 일정한 속도로 진행
  • ease: 전환 효과가 천천히 시작되다가 빨라지고 마지막에는 다시 느려짐 (기본)
  • ease-in: 전환 효과가 천천히 시작
  • ease-out: 전환 효과가 천천히 끝
  • ease-in-out: 전환 효과가 천천히 시작되어 천천히 끝
  • cubic-bezier: 전환 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

div {
width: 100px;
transition: width 1s;
}

#div_01 {
transition-timing-function: linear;
}

#div_05 {
transition-timing-function: ease-in-out;
}

div:hover { width: 300px; }

transition-delay 속성

• transition-delay 속성은 전환 효과가 나타나기 전까지의 지연 시간을 설정하는데, 전환 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 시작된다.

#resize {
    height: 100px;
    width: 150px;
    transition: width 1s, height 2s;
    transition-delay: 1s;
}

#resize:hover { width: 300px; height: 300px; }

전환과 변형 효과 동시 적용

#windmill {
    height: 100px;
    width: 100px;
    transition: width 2s, height 2s, transform 2s;
}

#windmill:hover {
    width: 300px;
    height: 300px;
    transform: rotateY(180deg);
}

 

애니메이션(animation)이란?

• 현재 스타일을 다른 스타일로 천천히 변화시키는 것을 애니메이션 효과라고 하는데, CSS2에서는 자바스크립트나 플래시 등의 외부 플러그인을 사용해야만 하지만 CSS3에서는 animation 속성을 사용한다.

#long {
    animation-name: 애니메이션 효과의 이름
    animation-duration: 애니메이션 효과를 재생할 시간
    animation-delay: 애니메이션 효과가 나타나기까지의 지연 시간
    animation-iteration-count: 애니메이션 효과가 몇 번 반복될지
    animation-direction: 애니메이션의 진행 방향
    animation-timing-function: 애니메이션 효과의 시간당 속도
    animation-fill-mode: 애니메이션 효과가 재생이 아닐 때 요소의 스타일을 설정
    animation-play-state: 애니메이션 효과의 재생 상태를 설정
}

#short {
    animation: myShorthand 3s ease-in-out 1s 3 reverse;
}

@keyframes 규칙

• CSS3에서 애니메이션 효과를 사용하기 위해서는 애니메이션에 대한 키 프레임을 정의해야 하는데,  키 프레임에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시한다.
• 애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용하여 요소와 키 프레임을 연결해 주어야 한다.

/* 시작 왼쪽(from, 0%)부터 마지막 오른쪽(to, 100%)까지 이동 */

p {
    animation-name: movingPara;
    animation-duration: 3s;
}

@keyframes movingPara {
    0% { border-color: red; }
    20% { border-color: orange; }
    40% { border-color: yellow; }
    50% { border-color: green; }
    60% { border-color: blue; }
    80% { border-color: navy; }
    100% { border-color: purple; }
}

animation 속성

• animation 속성은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 시퀀스를 나타내는 복수의 키프레임들로 이루어진다.

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

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: move 5s infinite;
}

animation-name 속성

• @keyframes 뒤에 애니메이션을 대표하는 임의의 이름를 부여하고, 이 이름을 animation-name 속성값으로 지정하여 사용하고자 하는 @keyframes rule을 선택한다.

div {
    position: absolute;
    width: 100px;
    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; }
}

animation-duration 속성

• animation-duration 속성은 한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정하며, 기본값은 0초이므로 재생 시간을 명시하지 않으면 아무런 효과도 나타나지 않는다.

animation-duration: .5s;
animation-duration: 500ms;

animation-delay 속성

• animation-delay 속성은 애니메이션 효과가 나타나기까지의 지연 시간을 설정하며, 이 속성값으로 설정된 시간이 흐른 뒤에야 비로소 시작된다.

p {
    animation-name: movingPara;
    animation-duration: 4s;
    animation-delay: 2s;
}

animation-iteration-count 속성

• animation-iteration-count 속성은 애니메이션 효과의 반복 횟수를 설정하는데, 기본값은 1이며 속성값이 infinite면 애니메이션 효과가 무한반복된다.

#one, #loop {
    animation-name: movingPara;
    animation-duration: 4s;
}

#one {
    animation-iteration-count: 2;
}

#loop {
    animation-iteration-count: infinite;
}

animation-direction 속성

• animation-direction 속성은 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 의미하며, normal/reverse/alternate/alternate-reverse로 설정할 수 있다.
• normal은 0%에서 100%방향으로 진행하고 reverse는 그의 반대로 진행한다.  
• alternate 속성값은 normal과 reverse를 순서대로 계속 반복하고, alternate-reverse는 그와 반대로 진행한다.

div {
    animation-name: movingPara;
    animation-duration: 2s;
}

#backward {
    animation-direction: reverse;
}

animation-timing-function 속성

• animation-timing-function 속성은 애니메이션 효과의 시간당 속도를 설정한다.
  • linear: 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행
  • ease: 애니메이션 효과가 천천히 시작되다 빨라지고 마지막에는 느려짐 (기본)
  • ease-in: 애니메이션 효과가 천천히 시작
  • ease-out: 애니메이션 효과가 천천히 끝
  • ease-in-out: 애니메이션 효과가 천천히 시작되어 천천히 끝
  • cubic-bezier: 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

div {
    animation: timingFunc 4s 3;
}

#div_01 {
    animation-timing-function: linear;
}

#div_05 {
    animation-timing-function: ease-in-out;
}

@keyframes timingFunc {
    from { left: 0px; }
    to { left: 300px; }
}

animation-fill-mode 속성

• animation-fill-mode 속성은 애니메이션 대기 또는 종료와 같은 미실행시 요소의 스타일을 지정한다.
  • none: 시작 프레임에 설정한 스타일을 적용하지 않고 대기하고, 애니메이션 실행 전 상태로 애니메이션을 되돌리고 종료한다.
  • forwards: 시작 프레임에 설정한 스타일을 적용하지 않고 대기하고, 종료 프레임에 설정한 스타일을 적용하고 종료한다.
  • backwards: 시작 프레임에 설정한 스타일을 적용하며 대기하고, 애니메이션 실행 전 상태로 애니메이션을 되돌리고 종료한다.
  • both: 시작 프레임에 설정한 스타일을 적용하고 대기하고, 종료 프레임에 설정한 스타일을 적용하고 종료한다.

div {
    width: 100px;
    height: 100px;
    position: relative;
    animation-name: myAnimation;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes myAnimation {
    0%   { left: 0px;   background: yellow; }
    100% { left: 200px; background: blue; }
}

animation-play-state 속성

• 애니메이션이 재생 또는 중지 상태일 때의 상태를 지정하는데, 기본값은 running이다.

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: move 5s infinite;
}

div:hover {
    background: blue;
    animation-play-state: paused;
}

div:active {
    background: yellow;
    animation-play-state: running;
}

@keyframes move {
    from { left: 0px; }
    to   { left: 200px; }
}

 

변형(Transform)이란?

• CSS3에서는 transform 속성을 사용하여 HTML 요소의 이동, 회전, 크기, 기울기 등의 모양, 크기, 위치를 자유롭게 바꿀 수 있다.

2D 변형(transform)

선택자 {
    transform: 요소에 2D 또는 3D 변형을 적용
    transform-origin: 요소 기본 기준점 설정하며, 기본값은 정중앙 (50%,50%)
}

.box {
    width: 150px;
    height: 150px;
    line-height: 150px;
    color: white;
    text-align: center;
    border-radius: 6px;
}

.scale1:hover {
    transition: transform 1s linear;
    transform-origin: 0 0;
    transform: scale(.5);
}

translate() 메소드

• translate() 메소드는 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킨다.
• 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동한다.

#trans {
    transform: translate(100px, 50px);
}

/* 요소의 위치를 X축으로 x만큼 이동 */
#translate_x {
    transform: translateX(30px)
}

/* 요소의 위치를 Y축으로 y만큼 이동 */
#translate_y {
    transform: translateY(15px)
}

scale() 메소드

• scale() 메소드는 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄인다.
• 주어진 배율이 1보다 크면 늘리고, 0보다 크고 1보다 작으면 줄인다.

#scale_inc {
    transform: scale(1.5, 2);
}

#scale_dec {
    transform: scale(0.7, 0.7);
}

/* 요소의 크기를 X축으로 x배 확대 또는 축소 */
#scale_x {
    transform: scaleX(3)
}

/* 요소의 크기를 Y축으로 y배 확대 또는 축소 */
#scale_y {
    transform: scaleY(0.5)
}

skew(), skewX(), skewY() 메소드

• skew() 메소드는 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울이고, skewX(), skewY() 메소드는 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울인다.
• 주어진 각도가 양수이면 양의 방향으로, 음수이면 음의 방향으로 기울인다.

#skew {
    transform: skew(20deg, 30deg);
}

#skew_x {
    transform: skewX(20deg);
}

#skew_y {
    transform: skewY(20deg);
}

rotate() 메소드

• rotate() 메소드는 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킨다.
• 주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전한다.

#rotate_2d {
    transform: rotate(30deg);
}

matrix() 메소드

• matrix() 메소드는 모든 2D transform 메소드를 한 줄에 설정할 수 있도록 해주며, 2D 변형과 관련된 6개의 매개변수를 가진다.

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

#matrix {
    transform: matrix(2, 0.3, 0.2, 1.3, 150, 100);
}

 

3D 변형(transform)

선택자 {
    transform: 요소에 2D 또는 3D 변형을 적용
    transform-origin: 요소에 변형을 적용하는 변환 중심을 설정
    transform-style: 요소에 변형을 적용할 때 그 변환이 자식요소에도 적용될지를 설정
    perspective: 3D 요소에 원근감을 표현할 때 사용할 픽셀 수 설정
    perspective-origin: 3D 요소에 원근감을 표현할 때 사용할 기준 축 설정
    backface-visibility: 요소의 앞면만을 표현하고 뒷면을 표현할지를 설정
}

translate3d(), translateX/Y/Z() 메소드

• translate3d(), translateX(), translateY(), translateZ() 메소드는 해당 요소를 주어진 x축, y축, z축의 거리만큼 이동시킨다.

#translate_00 {
    transform: translate3d(100px, 50px, -150px);
}

#translate_01 {
    transform: translateX(20px);
    transform: translateY(20px);
    transform: translateZ(20px);
}

scale3d(), scaleX/Y/Z() 메소드

• scale3d(), scaleX(), scaleY(), scaleZ() 메소드는 해당 요소를 x배, y배, z배 확대 또는 축소시킨다.

#scale_00 {
    transform: scale3d(0.1, 1, 0.8);
}

#scale_01 {
    transform: scaleX(0.1);
    transform: scaleY(1);
    transform: scaleZ(0.8);
}

rotate3d(), rotateX/Y/Z() 메소드

• rotate3d(), rotateX(), rotateY(), rotateZ() 메소드는 해당 요소를 x도, y도, z도의 각도만큼 이동시킨다.

#rotate_00 {
    transform: rotate3d(20deg, 80deg, -150deg);
}

#rotate_01 {
    transform: rotateX(20deg);
    transform: rotateY(20deg);
    transform: rotateZ(20deg);
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/