transform
- 요소의 좌표 공간을 변경하여 요소에
회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transition속성과 비슷해 보이지만, 전혀 다른 속성이기 때문에 유의해서 사용해야 합니다.
scale
- 속성의 값으로 숫자를 사용하여 요소의
크기를 조절할 수 있습니다. scale은 전부 작성하거나 하나만 작성할 수 있고, 하나만 작성하게 될 경우 가로 세로에 같은 값을 적용합니다.scaleX는 가로만,scaleY는 세로의 크기만 조절할 수 있습니다.
- 위의 이미지는
width: 300px; transform: scale(0.5)의 값을 가지고 있고, 아래 이미지는width: 150px의 값을 가지고 있습니다. 두 이미지의 크기는 같아 보이지만,scale을 활용하여 크기를 조절한 경우, 요소의 원래 크기는 유지하기 때문에 이미지는 절반의 크기로 줄었지만300px만큼의 영역을 차지합니다.
rotate
- 요소를
회전시킬 수 있습니다. - 속성값은
angle자료형을 사용하는데,deg, grad, rad, turn을 형식에 맞게 사용합니다. 음수값을 입력하면 역방향으로 회전합니다.
translate
- 요소의
위치를 이동시킬 수 있습니다. translate는scale과 다르게 값이 하나면x축에만 적용됩니다.translageX는 가로만,translateY는 세로만 적용됩니다.음수값도 값만큼 반대 방향으로 이동합니다. 수치와 퍼센트 둘다 값으로 사용할 수 있습니다.
skew
- 요소에
기울이기효과를 줘서 마름모꼴의 형태로 만들 수 있습니다. deg로 값을 표기하는데, 값이45deg가 되면 아래 위로 각이 아예 사라져서 콘텐츠가 보이지 않습니다.
transform-origin
background-origin과 유사하게 동작합니다.- 콘텐츠의 원점을
x축, y축기준으로 이동시킵니다.
transition
- 요소가 시간차를 두고 변환되는 상태의 모습을 보여줄 수 있습니다.
- 아래 소개되는 4가지 속성값을 한번에 사용할 수 있습니다. 다른 순서는 상관없지만,
duration은delay값보다 앞에 위치해야 합니다.
ex)transition: all 3s ease-in-out 1s;
transition-property
- 요소의 css속성 중
transition의 효과로 변하는 속성만을 선택할 수 있습니다. - 해당하는 속성의 이름을 열거할 수도 있고, 그 외에
none은 어떤 속성도 선택하지 않는 것이고,all은 모든 속성을 선택하는 것입니다.
transition-duration
- 요소가 변환되는 시간을 지정할 수 있습니다.
- 단위는
s(초)와ms를 지정할 수 있습니다.
transition-delay
- 요소가 변환되기 시작하는 시간을 지연시킬 수 있습니다.
- 여러가지 요소에 시간차를 두어, 도미노 효과와 같은 연쇄효과에 적용시킬 수 있습니다.
transition-timing-function
- 요소가 변환되는 시간 내 과정 중의 속도를 설정할 수 있습니다.
- 기본값은
ease이고,easein, easeout, easeinout, linear등의 값이 있고,cubic-bezier를 사용하여 수치도 입력할 수 있습니다.
animation
animation은transition과 달리, 다수의 스타일을 한번에 사용할 수 있습니다. 그리고transition은 사용자의 행동에 의한 결과인데animation은 사용자의 행동이 없어도 동작할 수 있습니다.
@keyframes
- 애니메이션은
@keyframes를 통해, 애니메이션을 정의하고 사용할 수 있습니다. from, to를 사용하거나%를 지정하여 단계별 스타일을 적용시킬 수 있습니다.animation은 단축 속성으로, 다른 속성들을 한번에 나열하여 작성할 수 있습니다. 최소한으로animation-name과animation-duration의 값은 포함되어야 합니다.
.animation {
width: 100px;
height: 100px;
background-color: pink;
animation: my-animation 1s infinite;
}
@keyframes my-animation {
0% {
width: 100px;
}
50% {
width: 300px;
}
100% {
width: 100px;
}
}animation-name, animation-duration
animation-name은transition-property처럼 사용되는 애니메이션의 이름을 나열해야 합니다.animation-duration은 총 시간이 아닌, 애니메이션이 동작하는 한 싸이클의 시간입니다. 그러므로, 음수도 속성값으로 사용할 수 없습니다.
animation-delay, animation-timing-function
animation-delay는transition-delay처럼 동작이 지연되는 시간을 작성합니다. 음수 값을 허용하는데,-1s는 바로 실행되지만, 이미 1초동안 실행되었던 것 처럼 1초 뒤 부터 작동합니다.animation-timing-function은transition-timing-funciton과 같이, 애니메이션이 동작하는 시간 내의 속력을 조절할 수 있습니다.
animation-iteration-count, animation-direction
animation-iteration-count는 애니메이션이 반복되는 횟수를 설정할 수 있습니다. 기본값은1이고,number형으로 값을 설정할 수 있습니다. 속성값infinite는 계속해서 반복합니다.animtaion-direction은 애니메이션이 진행되는 방향을 설정할 수 있습니다. 기본값은normal로 정방향으로 진행되고,reverse, alternate, alternate-reverse를 사용하여 방향을 전환할 수 있습니다.
animation-play-state, animation-fill-mode
animation-play-state는 애니메이션의 진행 상태를 설정할 수 있습니다. 기본값은running으로paused를 사용하여, 일시정지 시킬 수 있습니다.animation-fill-mode는 애니메이션이 시작하거나 끝났을 때의 스타일을 설정할 수 있습니다.forwards는 애니메이션이 끝나도 원래 스타일을 무시하고 마지막 애니메이션의 스타일을 적용하고,backwards는 애니메이션이 시작할 때 원래 스타일을 무시하고 처음 애니메이션의 스타일을 적용합니다.
자기개발 :)