동적 속성
CSS에서도 동적 스타일 속성을 적용할 수 있습니다.
요소를 움직이거나, 회전시키거나 특정 속성을 동적으로 조작하거나 애니메이션을 적용 시킬 수 있습니다.
transform
요소의 형태나, 크기, 위치 등을 변형시키는 CSS 기능입니다.
선택자 {transform: 함수;}
주로 사용하는 함수의 종류
2차원 변형 함수
| 종류 | 설명 |
|---|---|
| translate(x크기, y크기) | 지정한 크기만큼 x, y축으로 이동합니다. |
| translateX(크기) | 지정한 크기만큼 x축으로 이동합니다. |
| translateY(크기) | 지정한 크기만큼 y축으로 이동합니다. |
| scale(x크기, y크기) | 지정한 크기만큼 x, y축으로 확대/축소 합니다. |
| scaleX(크기) | 지정한 크기만큼 x축으로 확대/축소 합니다. |
| scaleY(크기) | 지정한 크기만큼 y축으로 확대/축소 합니다. |
| rotate(각도) | 지정한 각도만큼 회전합니다. |
| skew(x각도, y각도) | 지정한 각도만큼 x, y축으로 왜곡합니다. |
| skewX(각도) | 지정한 각도만큼 x축으로 왜곡합니다. |
| skewY(각도) | 지정한 각도만큼 y축으로 왜곡합니다. |
*3차원 변형 함수
| 종류 | 설명 |
|---|---|
| translate3d(x크기, y크기, z크기) | 지정한 크기만큼 x, y, z축으로 이동합니다. |
| translateZ(크기) | 지정한 크기만큼 z축으로 이동합니다. |
| scale3d(x크기, y크기, z크기) | 지정한 크기만큼 x, y, z축으로 확대/축소 합니다. |
| rotate(x크기, y크기, 각도) | 지정한 각도만큼 x, y축으로 회전합니다. |
| rotate3d(x크기, y크기, z크기, 각도) | 지정한 각도만큼 x, y, z축으로 회전합니다. |
| rotateX(각도) | 지정한 각도만큼 x축으로 회전합니다. |
| rotateY(각도) | 지정한 각도만큼 y축으로 회전합니다. |
| rotateZ(각도) | 지정한 각도만큼 z축으로 회전합니다. |
| perspective(길이) | 깊이값을 지정하여 입체적으로 보이게 합니다. |
💡뚝딱이는 효과! 부드럽게 바꾸러면?
transform만 사용해서 동적효과를 줄 경우 딱! 딱! 끊어지듯이 작동하여 다소 뚝딱인다는 느낌이 들 수 밖에 없습니다.
그럴 때 스타일이 바뀌는 실행시간, 지연시간, 진행되는 속도의 곡선 등을 적용해 좀 더 부드러운 동적효과를 줄 수 있게 해주는 속성이 아래에 있는transition속성 입니다.
transition
트랜지션이란, n.이행으로 특정 스타일 적용을 할 때 실행할 시간, 지연시간등을 적용하는 속성을 말합니다.
즉, 요소의 CSS속성을 변경시키는 것에 대해 시간을 지정시켜 부드러운 동적 효과를 줄 수 있습니다.
transition-property
트랜지션을 적용할 대상 속성을 작성합니다.
선택자 {transition-property: 키워드; | 속성이름;}all: 요소의 모든 속성에 트랜지션을 적용합니다. (기본값)none: 트랜지션을 적용할 속성을 선택하지 않습니다.속성이름: 해당 속성에 대해 트랜지션을 적용합니다. 다수일 경우,(쉼표)로 구분해서 작성합니다.
transition-delay
트랜지션의 지연시간을 지정합니다.
해당 속성을 사용시, 지정한 시간만큼 기다렸다가 트랜지션이 시작됩니다.
선택자 {transition-delay: 시간1, 시간2;}시간:s(초 단위),ms(밀리초 단위)를 이용할 수 있으며, 트랜지션 대상이 다수일 경우,(쉼표)로 구분해서 작성합니다.
tarnsition-duration
트랜지션을 실행할 시간을 지정합니다.
선택자 {transition-duration: 시간1, 시간2;}시간:s(초 단위),ms(밀리초 단위)를 이용할 수 있으며, 트랜지션 대상이 다수일 경우,(쉼표)로 구분해서 작성합니다.
transition-timing-function
트랜지션의 실행 형태(실행할 속도 곡선)를 지정합니다.
선택자 {transition-timing-function: 키워드;}linear: 시작부터 끝까지 똑같은 속도로 진행합니다.ease:처음에는 천천히 시작하고 점점 빨리지다가 마지막엔 천천히 진행됩니다. (기본값)ease-in: 느리게 시작합니다.ease-out:느리게 끝냅니다.ease-in-out:느리게 시작하고 느리게 끝냅니다.cubic-bezier(n, n, n, n):베지에 함수를 정의해서 사용합니다.n값은 0~1 사이의 값만 사용가능합니다.
transition
위 속성들을 한번에 작성할 수 있습니다.
선택자 {transition: 값1, 값2, 값3;}값의 순서는 상관 없으나, duration과 delay의 시간관련 속성이 2개다 보니, 앞에있는 시간을 duration, 뒤에있는 시간을 delay로 적용됩니다.
animation
CSS를 통해 미리 정해놓은 애니메이션 속성(CSS 속성값 변경을 통한)을 적용시킬 수 있습니다.
@keyframes
애니메이션 이름을 지정해 애니메이션을 정의합니다.
각 애니메이션이 실행될 지점을 설정하여 해당 지점 별 적용될 스타일을 작성해줍니다.
@keyframes 애니메이션이름 {
지점1 {스타일;}
지점2 {스타일;}
지점3 {스타일;}
}from: 시작 위치를 말합니다.0%로 입력할 수도 있습니다.to: 끝 위치를 말합니다.100%로 입력할 수도 있습니다.n%:0~100%사이의 값을 입력할 수 있습니다.
animation-name
위@keyframes으로 작성해놓은 애니메이션 중 적용할 애니메이션 이름을 넣습니다.
선택자 {animation-name: 애니메이션 이름;}animation-direction
애니메이션의 진행방향을 설정합니다.
선택자 {animation-direction: 키워드;}normal:from,0%에서to,100%로 진행합니다. (기본값)reverse:to,100%에서from,0%로 진행합니다.alternate: 홀수번째는normal로, 짝수번째는reverse로 진행합니다.alternate-reverse: 홀수번째는reverse로, 짝수번째는normal로 진행합니다.
animation-delay
애니메이션의 지연 시간을 지정합니다.
해당 속성을 사용할 시, 지정한 시간만큼 기다렸다가 애니메이션 시작됩니다.
선택자 {animation-delay: 시간;}시간:s(초 단위),ms(밀리초 단위)를 이용할 수 있습니다.
animation-duration
애니메이션을 실행할 시간을 지정합니다.
선택자 {animation-duration: 시간;}시간:s(초 단위),ms(밀리초 단위)를 이용할 수 있습니다.
animation-timing-function
애니메이션의 실행 형태(실행할 속도 곡선)를 지정합니다.
선택자 {animation-timing-function: 키워드;}linear: 시작부터 끝까지 똑같은 속도로 진행합니다.ease:처음에는 천천히 시작하고 점점 빨리지다가 마지막엔 천천히 진행됩니다. (기본값)ease-in: 느리게 시작합니다.ease-out:느리게 끝냅니다.ease-in-out:느리게 시작하고 느리게 끝냅니다.cubic-bezier(n, n, n, n):베지에 함수를 정의해서 사용합니다. n값은 0~1 사이의 값만 사용가능합니다.
animation-interation-count
애니메이션의 반복횟수를 설정합니다.
선택자 {animation-interation-count: 키워드;}infinite: 애니메이션을 무한 반복하도록 설정합니다.숫자: 설정한 횟수만큼 반복하도록 설정합니다.
animation
위 속성들을 한번에 작성할 수 있습니다.
단, animation-name과 animation-duration은 필수로 작성해줘야합니다.
2개 이상의 애니메이션 작성 시 ,(쉼표)로 구분합니다.
선택자 {animation: 애니메이션이름1 속성들, 애니메이션이름2 속성들;}참고
Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!
