[CSS]position, transition, transform, animation

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard

[코드캠프] 강력한 CSS 강의 - 인프런

---

 

📖position/transition

🔎단위 심화

calc(): 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용한다.

⇒곱셈과 나눗셈의 경우는 공백의 유무가 상관없지만, 덧셈과 뺄셈의 경우 공백이 필수적이다.

 

🔎position

✔position이란?

HTML 요소가 배치되는 방식을 결정하는 속성을 말한다.

✔position의 속성값

static: 요소를 문서상 원래 있어야 하는 위치에 배치한다.

-top/left/bottom/right 적용 불가

 

relative: 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다.

-top/left/bottom/right 적용 가능

 

absolute: 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다. 이때 절대 좌표의 기준은 가장 가까운 relative가 적용된 요소가 된다. 없다면 최상위 개체(html body 전체)가 된다.

-top/left/bottom/right 적용 가능

 

fixed: 스크롤과 무관하게 뷰포트를 기준으로 요소의 위치를 설정할 수 있다.

-기준: viewport

 

sticky: 요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정된다.

-기준: 부모 요소의 좌표

 

 

🔎z-index

여러개의 요소가 겹쳐져 있을 때, 무엇이 앞으로 나올지 결정하는 속성

-z-index의 기본값은 auto이다. 숫자가 클수록 앞으로 나오게 된다.(1<2<3<…)

 

 

📖transition

✔transition이란?

transition을 통해서 움직임을 부드럽게 만들어줄 수 있다.

 

✔transition-property

어떠한 속성(property)에 transition을 적용할 것인지 결정한다.

transition-property: color, transform

 

✔transition-duartion

transition에 걸리는 시간을 지정한다.

transition-duration: 0.2s

 

✔transition-timing-function

transition의 속도 패턴을 지정한다.

transition-duration: ease-in-out

• linear: 일정한 속도로 변화한다.
• ease: 시작할 때는 빨라지다 느려진다.
• ease-in: 천천히 시작했다가, 속도를 높여 끝난다.
• ease-out: 빠른 속도로 시작했다가, 천천히 끝난다.
• ease-in-out: 천천히 시작했다가, 정상 속도가 됐다가, 빠르게 끝난다.

 

✔transition-delay

transition 요청을 받은 후, 실제로 실행되기까지 기다려야 하는 시간의 양을 지정한다.

transition-delay: 2s

 

✔transition 단축속성

transition: property duration timing-function delay

예: transition: color 0.4s ease-in-out 1s

 

📖transform

🔎transform이란?

1. 변형 시킨다는 의미
2. 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다.
3. transform은 중첩 적용이 가능하다.
4. ⇒예를 들어, 요소를 75도 회전시키고 y축 방향으로 120px 이동시키려면 transform: rotate(75deg) translateY(120px)이다.

✔translate(x,y)

요소의 좌표를 움직일 수 있다. X축으로 x만큼, Y축으로 y만큼 이동시킨다.

transform: translate(20px, 25%);

 

 

✔translateX(x)

요소의 X축 좌표를 n만큼 움직일 수 있다.

transform: translateX(20px);

 

 

✔translateY(y)

요소의 Y축 좌표를 n만큼 움직일 수 있다.

 

✔scale(x,y), scaleX(n), scaleY(n)

X축으로 x만큼, Y축으로 y만큼 요소를 축소 혹은 확대한다.

transform: scale(0.75, 1.1);

 

✔skew(x,y), skewX(n), skewY(n)

X축으로 x도 만큼, Y축으로 y도 만큼 요소를 기울인다.

transform: skew(15deg, 10deg);

 

✔rotate(n)

요소를 n만큼 회전시킨다.

 

transform: rotate(45deg)

⇒transform은 transition이나 animation과 함께 사용하여 더 다채로운 애니메이션 효과를 만들 수 있다.

 

예시1

.box:hover span{
    transform: translateY(-10px);
}

.box span:nth-child(1){
    transition: all 0.3s ease-in-out;
}

.box span:nth-child(2){
    transition: all 0.3s ease-in-out 0.1s;
}

.box span:nth-child(3){
    transition: all 0.3s ease-in-out 0.2s;
}

.box span:nth-child(4){
    transition: all 0.3s ease-in-out 0.3s;
}

.box span:nth-child(5){
    transition: all 0.3s ease-in-out 0.4s;
}

.box span:nth-child(6){
    transition: all 0.3s ease-in-out 0.5s;
}

.box span:nth-child(7){
    transition: all 0.3s ease-in-out 0.6s;
}

 

 

예시2

.box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: transform 0.5s ease; /* transform 속성에 대한 전환 효과를 추가합니다. */
    }

    .box:hover {
      transform: scale(1.2); /* 마우스를 호버할 때 크기가 1.2배로 변환됩니다. */
    }

 

📖animation

🔎animation이란?

여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법

 

❗CSS를 이용해서 애니메이션을 만드는 두 가지 방법

1. transition 속성 활용
2. animation 속성과 keyframe 활용

 

👀transition vs animation

1. transition: 특정한 이벤트를 기점으로 작동한다.(hover 등)
2. animation: 시작하기 위한 이벤트가 필요 없다. 시작, 정지, 반복까지 제어할 수 있다.

⇒기본적으로 animation은 작성하기 귀찮기(..^^)때문에 transtion으로 만들 수 없는 애니메이션을 animation과 keyframes를 이용하여 만드는 것이 효율적이다.

 

🔎keyframes란?

CSS 애니메이션의 시작, 중간, 끝 등의 중간상태를 정의한다.

@keyframes moveRight{
	from {
		left: 0;
	}
	to {
		left: 200px;
	}
}

 

🔎animation 관련 속성들

✔animation-name

어떠한 keyframes를 요소에 적용할 것인지 지정한다.

animation-name: moveRight;

 

✔animation-duration

애니메이션을 한 번 재생하는데 걸리는 시간을 설정한다.

animation-duration: 2s;

 

✔animation-direction

애니메이션 재생 방향을 정의한다.(정방향/역방향)

• animation-direction: alternate
• normal(기본값): 정방향으로 재생한다.
• reverse: 역방향으로 재생한다.
• alternate: 정방향으로 재생한다. 단, 반복시 정방향/역방향을 번갈아 재생한다.
• alternate-reverse: 역방향으로 재생한다. 단, 반복시 역방향/정방향을 번갈아 재생한다.

 

✔animation-iteration-count

애니메이션 재생 횟수를 정의한다.

animation-iteration-count: infinite;

 

✔animation-timing-function

애니메이션 재생 패턴을 정의한다. transition-timing-function과 유사하다.

animation-timing-function: ease-in-out;

 

✔animation-delay

애니메이션 시작을 얼마나 지연할지 설정한다.

animation-delay: 2s;

 

✔animation 단축 속성

animation: moveRight 0.4s linear 1s infinite alternate;

⇒animation: name duration timing-function delay iteration-count direction

 

예시1

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: brightness(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: brightness(1);
    }
}

#container1__text1{
    font-size: 40px;
    color: #2d3436;

    animation: fadeInUp 1.5s ease-out; /* 1.5초 동안 애니메이션 실행, ease-out 속도 곡선 사용 */
}