[CSS] 트랜지션 관련 스타일

트랜지션

• 태그가 특정 동작 (마우스 클릭, 마우스 호버)에 의해 변형 (이동, 확대, 찌그러짐) 되는 것

태그 이동 (translate)

• translate 함수를 이용하면 설정된 태그가 특정위치로 이동하게됨
• 슬라이드바 등에 활용됨
• transform : translate(x축,y축) : 태그를 이동시킬 수 있음
  • tramslateX(x축) : 가로로 이동
  • tramslateY(y축) : 세로로 이동
• perspective(원근감px) tramslateZ(px); : 3D 변형
  • perspective : 원근 효과, 깊이와 거리감 부여 (클 수록 더 멀리 있는 것처럼 보임)
  • tramslateZ : 3D 공간에서 Z 축을 기준으로 원소를 이동 (양수는 가까이, 음수는 멀리)

.translate:hover{
    transform:translate(200px, 200px); /* 오른쪽으로 200px, 아래쪽으로 200px 이동 */
}

.transz:active{
    transform: perspective(150px) translateZ(100px); 
}

태그 확대 (scale)

• transform : scale(배수) : 태그가 확대됨
  • scaleX(배수) : 가로로만 들어남
  • scaleY(배수) : 세로로만 늘어남
• skew(각도deg) : 각도만큼 찌그러져보임
• rotate(각도deg) : 각도만큼 회전

.scale:hover{
     transform:scale(1.5); /* 태그가 가로 세로 1.5배만큼 확대 */
}

.skew:hover{
     transform:skew(80deg) /* 80도로 찌그러짐 */
}

트랜지션 적용하기

• 태그가 변형속성에 의해 변형이 될 때 부드럽게 변형이 될 수 있게 해주는 속성
• transition-property : 적용할 속성
  • 어떤 속성에 대해 전환 효과를 적용할 것인지를 지정
  • all : 모든 속성에 대해 전환 효과 적용
• transition-duration  : 지속시간
• transition-timing-function : 전환 효과의 타이밍 함수
  • linear : 일정한 속도로 전환 효과가 진행
  • ease : 기본값, 처음에는 천천히 시작하고 중간에는 더 빨라지며 마지막에는 다시 천천히 끝남
  • ease-in : 천천히 시작하면서 가속도가 증가
• transition : 한번에 모든 속성을 지정할 때 사용

<input type="checkbox">
<div class="transitiondiv transition transi"></div>


.transitiondiv{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    transition-property: all;
    transition-duration: 4s;
}
input:checked~.transition{
    transform: translateX(400px);
}