CSS 변형, 트랜지션, 애니메이션

프론트

CSS 변형, 트랜지션, 애니메이션

짱코딩러 2022. 8. 25. 00:40

transition-property

변형(transform)

변형 : 특정 요소의 크기나 형태 등 스타일이 바뀌는 것.

2차원 변형 : x,y 좌표로 이동

3차원 변형 : x,y,z 좌표로 이동(원근감 추가)

translate 함수 : 지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴
- translate(tx, ty)
- translate3d(tx, ty, tz)
- translateX(tx)
- translateY(ty)
- translateZ(tz)

#movexy:hover {
  transform: translate(10px, 20px);
  /* x축으로(가로) 10px, y축으로(세로) 20px 이동 */
}

scale 함수 : 지정한 크기만큼 요소를 확대/축소(넓어지고 좁아짐)
- scale(sx, sy): sy값이 주어지지 않는다면 sx값과 같다고 간주한다.
- scale3d(sx, sy, sz)
- scaleX(sx)
- scaleY(sy)
- scaleZ(sz)

div#box1 {
  transform: scale(0.5, 0.5);	//가로,세로 0.5만큼 축소
}

rotate 함수 : 각도만큼 웹 요소를 시계 방향이나 반시계 방향으로 회전
일반 각도(degree)나 래디안(radian) 값 사용(1래디안=1/180도)
2차원 함수 기본형

- transform: rotate(각도)

#rotate1:hover {	/* 마우스 올리면 */
  transform: rotate(40deg);  /* 시계 방향(오른쪽)으로 40도 회전 */
  transition:all 3s;	/* 3초동안 회전 */
}

3차원 함수 기본형(기준이 되는 좌표를 막대기처럼 생각해보셈 등쪽 배쪽 방향으로 회전함)
- transform: rotate(rx, ry, 각도)
- transform: rotate3d(rx, ry, rz, 각도)
- transform: rotateX(각도)
- transform: rotateY(각도)
- transform: rotateZ(각도)

perspective 속성 : 원근감을 갖게 한다. 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어짐

.origin {
  width: 100px;
  height: 100px;
  margin: 40px;
  border: 1px solid black;
  perspective: 200px;  /*원근감 추가. #rotatex의 부모요소에 적용해준다.  */
}
.origin > div {				
  width:100px;
  height:100px;
  background-color:orange;
  transition:all 3s;  /* 3초 동안 회전하도록 트랜지션 적용 */
}
#rotatex:hover {
  transform: rotateX(55deg);  /* x축으로 55도 회전 */
}
</style>

<body>
    <div class="origin">
      <div id="rotatex"></div>
    </div>

skew 함수 : 요소를 지정한 각도만큼 비틀어 왜곡(절편처럼 늘어남)
- transform: skew(ax, ay): ay값이 주어지지 않으면 0으로 간주한다.
- transform: skewX(ax)
- transform: skewY(ay)

div#box1 {
  transform: rotate(45deg) scale(1.5) skew(30deg) translate(50px);
}

matrix : perspective를 제외한 모든 요소들을 한번에 일괄 적용시킴

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

div {
  width: 50px;
  height: 50px;
  background-color: silver;
  border: 1px solid black;
  text-align: center;
}
div#box {
  transform: matrix(1, 1, -1, 1, 50, 50);
}

트랜지션

트랜지션 : 마우스를 올렸을 때, 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

//너비 2초동안 늘리기
transition: width 2s;
//여러가지를 지정해줄 수 있음
transition: width 3s, height 3s, border 3s, transform 3s;

transition-property : 트랜지션을 적용할 속성 선택

transition-property : all | none | 속성이름

transition-duration : 트랜지션 진행 시간 지정(여러개라면 쉼표로 구분)

ransition-duration : 시간

transition-property: width, height;  /* 트랜지션 대상 - 너비, 높이 */
transition-duration: 2s, 1s;  /* 트랜지션 시간 - 2초, 1초 */

transition-timing-function : 트랜지션의 시작과 중간, 끝에서의 속도 지정

-linear : 느리게 -> 빠르게 -> 느리게 (기본값)

-ease : 일정한 속도

-ease-in : 느리게-> 빠르게

-ease-out : 빠르게-> 느리게

-ease-in-out : 느리게 시작하고 느리게 끝남

-cubic-bezier(n, n, n, n) : (x1,y1) (x2,y2)값으로 지정해줄 수 있음. 실수 입력

transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

transition-delay : 지연 시간 지정

transition-delay : 시간

transition : 트랜지션 관련 속성을 한꺼번에 지정(앞에 오는 시간은 duration, 뒤에 시간은 delay로 간주)

transition: transition-property | transition-duration | transition-timing-function | transition-delay;
/* 속성  기간  방식  지연 */

transition:all ease 7s;

애니메이션

@keyframes : 바뀌는 지점 지정

animation-name : 어떤 @keyframes로 사용할지 정함

animation-duration : 실행 시간 지정

animation-timing-function : 키프레임의 전환 형태 지정

animation-delay : 시작 시간 지정(지연시간)

animation-iteration-count : 반복 횟수 지정

animation-direction : 애니메이션 종료한 뒤, 처음부터 시작할지 역방향으로 갈지 진행 방향지정

animation-fill-mode : 애니메이션을 마친 후 어떤 상태로 만들지 지정

+스크롤 애니메이션

https://michalsnik.github.io/aos/