[1주차] transform, transition, animation

1월 13일 자 학습 내용 정리입니다.

 

 

✅ tramsform

특정 영역에서 object를 회전시키거나 위치 이동, 크기 변경이 필요할 때 사용한다.

 

rotate

transform: rotate(각도)

 

object에 대해 평면적인 회전을 할 때 사용한다.

음수와 양수 모두 가능하며 양수이면 시계방향, 음수이면 반시계방향으로 회전한다.

 

scale

transform: scale(width 비율, height 비율)

 

object의 크기를 조절할 때 사용한다.

2를 입력하면 object 기본 크기의 2배, 0.5를 입력하면 object 기본 크기의 0.5배가 된다.

 

skew

transform: skew(x축, y축)

 

object에 대해 입체적인 회전을 할 때 사용한다.

 

translate

transform: translate(x축, y축)

 

object의 위치를 이동할 때 사용한다.

 

 

위의 transform 속성을 사용한 예시는 다음과 같다.

 

div {
    transform: rotate(45deg);
    transform: scale(2, 3);
    transform: skew(10deg, 20deg);
    transform: translate(100px, 200px);
}

 

 

 

✅ prefix(접두사)

최신 버전의 css를 사용할 때 간혹 해당 css 속성이 특정 브라우저 혹은 특정 버전에서 표준화 되지 않은 경우가 있다.

이때 표준화 되지 않은 브라우저에서도 실행하기를 원할 경우 prefix를 사용한다.

 

• -webkit- : 크롬, 사파리
• -moz- : 파이어폭스
• -ms- : 익스플로러 9.0, 마이크로소프트 엣지
• -o- : 오페라

 

prefix를 사용한 예시는 다음과 같다.

 

div {
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -ms-transition: all 4s ease;
    -o-transition: all 4s ease;
    transition: all 4s ease;
}

 

 

 

✅ transition

변화하는 과정을 보여주고자 할 때 사용한다.

 

transition-property

효과를 적용하고자 하는 css 속성을 나타낸다.

all이 기본값으로 설정되어 있으며 width, height과 같은 특정 속성 값을 입력할 수 있다.

아무 속성도 transition 효과를 주고 싶지 않을 때는 none을 입력하면 된다.

 

div {
    transition-property: width;
}

 

transition-duration

효과가 나타나는데 걸리는 시간을 의미한다.

쉽게 말하자면 transition이 일어나는 지속 시간을 뜻하는 것이다.

 

div {
    transition-duration: 2s;
}

 

transition-timing-function

효과를 나타내는 속도 곡선을 의미한다.

transition-timing-function 속성을 통해 transition 효과의 지속 시간 동안 속도를 변경할 수 있다.

 

• ease : 기본값, 느리게 시작하다 빨라지고 다시 느리게 종료된다. cubic-bezier(0.25,0.1,0.25,1)과 같다.
• linear : 시작부터 끝까지 동일한 속도이다. cubic-bezier(0,0,1,1)과 같다.
• ease-in : 느리게 시작한다.
• ease-out : 느리게 종료한다.
• ease-in-out : 느리게 시작하고 느리게 종료한다.

 

div {
    transition-timing-function: linear;
}

 

transition-delay

transition 효과가 시작되는 때를 의미한다.

초(s) 또는 밀리초(ms)로 정의할 수 있으며 1s라면 transition 효과가 1초 후 나타남을 의미한다.

 

div {
    transition-delay: 1s;
}

 

 

 

transition은 이처럼 transition-property, transition-duration, transition-timing-function, transition-delay라는 4가지 속성을 가진다.

transition 속성을 서술할 때 위의 예시처럼 4가지를 각각 지정해도 되지만 transition 속성을 이용하여 한 줄로 정의할 수도 있다.

 

transition: property duration timing-function delay

 

한 줄로 정의할 때에는 위와 같은 순서를 따른다.

해당 속성을 주고 싶지 않은 경우 생략은 가능하지만 duration과 delay는 둘 다 시간을 지정하므로 이 둘의 구분은 필요하다.

따라서 무조건 앞서 정의된 시간이 duration을 의미하며 시간이 하나만 정의되어 있어도 이것은 duration을 의미한다.

 

 

✅ hover

가상 선택자로 css에서 미리 만들어 놓은 클래스이다.

마우스를 올렸을 때 라는 조건을 의미한다.

 

div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s linear 500ms;
}

div:hover {
    width:300px;
}

 

만약 위와 같이 css가 지정되어 있다고 할 때 div는 width, height가 각각 100px이고 빨간색인 상자이다.

이때 이 상자에 마우스 커서를 올리면 상자의 width가 천천히 변화해 300px이 된다.

 

 

 

✅ Animation

특정 조건에 상관 없이 어떠한 이벤트를 적용하고자 할 때 사용한다.

 

animation-name

만들 애니메이션에 대한 이름을 의미하며 개발자가 임의로 작성할 수 있다.

 

div {
    animation-name: changeWidth;
}

 

animation-duration

애니메이션의 소요 시간을 의미한다.

기본값은 0이며 초(s) 또는 밀리초(ms) 단위로 지정할 수 있다.

 

div {
    animation-duration: 3s;
}

 

animation-timing-function

애니메이션의 속도 곡선을 지정한다.

transition과 같이 ease, linear, ease-in, ease-out, ease-in-out 등이 있다.

 

div {
    animation-timing-function: linear;
}

 

animation-delay

애니메이션 지연 시간을 의미한다.

초(s) 또는 밀리초(ms) 단위로 지정할 수 있다.

 

div {
    animation-delay: 1s;
}

 

animation-iteration-count

애니메이션의 반복 횟수를 의미한다.

숫자로 지정 시 해당 횟수만큼 반복한다.

 

• number : 해당 number의 횟수만큼 반복한다.
• infinite : 무한으로 반복한다.

 

div {
    animation-iteration-count: infinite;
}

 

animation-direction

애니메이션의 진행 방향을 의미한다.

 

• normal : 기본값, from -> to의 단방향으로 애니메이션이 진행된다.
• reverse : to -> from의 단방향으로 애니메이션이 진행된다.
• alternate : from -> to -> from의 양방향으로 애니메이션이 진행된다.
• alternate-reverse : to -> from -> to의 양방향으로 애니메이션이 진행된다.

 

div {
  animation-direction: alternate;
}

 

@keyframes

애니메이션의 진행 방식을 서술한다.

애니메이션 효과를 줄 object에 animation 속성을 지정한 후 아래에서 @keyframes를 통해 해당 애니메이션이 어떻게 진행될 것인지를 서술하면 된다.

from, to 대신 0%, 100% 처럼 비율 지정도 가능하다.

 

@keyframes 애니메이션 이름 {
    from { 변화를 줄 입력값 }
    to { 변화를 줄 입력값 }
}

 

 

 

transition 때와 마찬가지로 animation도 각각의 속성을 따로 지정해도 되지만 한 줄로 서술이 가능하다.

 

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

 

한 줄로 정의할 때는 위의 순서를 따르며 속성 일부를 생략할 수도 있다.

 

다음은 애니메이션을 정의한 예시이다.

 

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: changeWidth 1500ms linear 1s infinite alternate
}

@keyframes changeWidth {
    from { width: 100px }
    to { width: 600px }
}

 

 

 

🔍 참조

transform https://developer.mozilla.org/ko/docs/Web/CSS/transform

vendor prefix https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

transition https://www.w3schools.com/cssref/css3_pr_transition.asp

animation https://www.w3schools.com/cssref/css3_pr_animation.asp