[CSS] animating movement | transition, transform, animation

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

🎀 Transition

속성을 서서히 변화시킵니다.

display는 block & none 일 때, transition이 적용되지 않는다! 하지만 시각적으로만 숨김으로써 적용할 수 있습니다.

reference 1,2 참고

≫ transition-timing-function : transition의 진행 속도를 조절합니다.

ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit

ex) 모달 효과 (opacity로 적용해보기)

.custom-modal{
    /* display: none; */
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow: hidden;
    outline: 0;
    opacity: 0;
    transition: ease 0.3s;  /* 아주 미세한 부드러움 추가 */
}
.custom-modal.show{
    /* display: block; */
    visibility: visible;
    opacity: 1;
    background-color: rgba( 0, 0, 0, 0.62 );   /* 투명도가 전이되지 않게 배경색을 rgba 로 사용함 */
}
.custom-modal.show .modal-backstage{
    width: 100%;
    height: 100%;
    pointer-events: none;
}

🎀 Transform

요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다.

reference 3 참고

scale 축소 / 확대

transform: scale(1);    /* 기준 */
transform: scale(0.95); /* 축소 */
transform: scale(1.15); /* 확대 */

버튼 눌리는 효과주기

button:active{
    transition: ease-in-out 0.1s;
    transform: scale(0.97);
    box-shadow: 2px 2px 10px #eee inset; /* 눌렸을 때 그림자로 입체감넣기 */
}

🎀 Animation

CSS애니메이션 초보자 입문서 / 동적효과 관련내용

reference 4 참고

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}

≫ animation option

• animation-name : 애니메이션 이름은 square-to-circle 입니다.
• animation-duration : 애니메이션 길이는 2s 입니다. (time| initial | inherit)
• animation-delay : 시작 전 딜레이는 1s 입니다. (time| initial | inherit)
• animation-iteration-count : 반복횟수는 infinite 으로 멈추지 않습니다.
• timing-function : CSS Easing animation tool 에서 쉽게 계산하여 속도감 정의할 수 있음
• animation-direction : 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.

---

Reference

1) 속성을 서서히 변화시키는 방법

CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성

2) display none이 transition이 안먹히는 이유

display none이 transition이 안먹히는 이유

3) https://www.codingfactory.net/12593

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

4) https://www.codingfactory.net/11163

CSS / 애니메이션 / animation

5) CSS애니메이션 초보자 입문서 (브라우저별 지원방법 포함)

CSS 애니메이션 초보자 입문서