CSS 애니메이션

bible_k_·2023년 3월 1일

엘리스트랙 1주차 3번째 수업

1. transform

transform 이란?
웹사이트의 특정 영역에서 오브젝트를 각도를 튼다거나 크기, 위치를 변경할 때 사용하는 속성

속성값의 종류

rotate: 입력한 각도만큼 회전
평면적인 회전, 음수도 입력 가능, deg단위 사용
scale: 선택된 object를 확대 혹은 축소하여 비율 변경
사용 형식: scale(width비율값, heigth비율값)
ex. scale(2, 3) -> width 2배, height 3배 확대
축소하고자 한다면 0~1사이의 값을 입력
skew: 입체적으로 각도를 비틀 때 사용
x축 y축을 기준으로 입력한 각도만큼 비틂, 음수 입력 가능, deg단위 사용
ex. skew(10deg, 20deg) -> x축 기준으로 10도, y축 기준으로 20도 비틂
translate: 선택된 object의 위치(좌표) 변경
x축 y축 기준으로 좌표 변경
ex. translate(100px, 200px) -> x축으로 100px, y축으로 200px 이동

prefix 접두사

transform 사용시 하위버전 브라우저에서도 실행을 원할 경우 prefix 접두사를 사용해야한다.
transform이 css3의 최신 언어이기 때문에 익스플로러 하위버전에서는 사용이 불가하다.
prefix 사용시 각 브라우저의 하위버전에도 동작한다.

-webkit- 크롬, 사파리
-moz- 파이어폭스
-ms- 익스플로러9.0
-o- 오페라

ex.
.transition {
    -webkit-transform: translate(100px, 200px);
    -moz-transform: translate(100px, 200px);
    -ms-transform: translate(100px, 200px);
    -o-transform: translate(100px, 200px);
}

2. transition

transition이란?
특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용
전환이 일어날 요소들을 작성해주는 것

.transition {
    transition: width 2s linear 1s;
}

transiton의 속성을 통해 조건을 먼저 작성한다.

.transition:hover {
    width: 300px;
}

또한, 보통 transition을 사용할 때 가상선택자 hover와 쌍을 이루어사용하게 된다.
가상선택자를 통해 마우스가 올려졌을 때 transiton 적용되도록하여 transition을 통해 변화될 내용을 작성한다.

transition 속성

property: 효과를 적용하고자 하는 CSS속성, 속성은 여러 개 지정해도 된다.
duration: 효과가 나타나는 시간
time-function: 효과가 나타나는 속도 곡선을 지정
속성값 linear은 일정하게를 의미
delay: 효과가 발동되기까지의 시간 조건을 지정
ex. delay: 1s -> 1초후를 의미

각각 속성을 따로 입력할 수도 있고 한줄로 작성할 수도 있다.

ex.1

.transition {
    transition: width 2s linear 1s;
}

.transition:hover {
    width: 300px;
}

위 예시에서는 마우스를 올리면 1초 후에 width 값이 300px로 2초동안 속도 일정하게 변하는 효과가 발생하는 설정이다.

ex.2

transition: all 1s;

property속성을 all로 사용하면 선택자의 모든 css속성값들에 transition효과를 적용된다.

ex.3

.transition {
    transition: background-color 1s;
}

p:hover {
background-color: #8683bd;
}

위 예시에서의 조건은 배경색에 transition효과를 줄 것이고(property속성에 해당)
1초동안 지속할 것(duration 속성에 해당)이라고 작성되었다.
또한 p영역에 마우스를 올렸을 때 배경컬러가 변경되는 설정이다.

3. animation

animation 속성

animation-name: changewith;
애니메이션 이름을 설정하는 속성(임의로 설정)
animation-duration: 3s;
애니메이션이 실행되는 시간을 설정하는 속성
1000ms = 1s (ex, 1500ms = 1.5초)
animation-timing-function: linear;
애니메이션 속도 곡선을 제어하는 속성
linear=일정한 속도 지속
animation-delay: 1s;
브라우저를 실행한 후 애니메이션이 시작될 때까지의 시간을 설정하는 속성
animation-iteration-count: 6;
애니메이션이 재생되는 횟수를 설정하는 속성
infinite: 무한 반복 효과(애니메이션이 끝나지 않음)
animation-direction: alternate;
애니메이션 재생 방향을 설정하는 속성(from, to)
normal: from-> to, from->to
reverse: to -> from, to -> from
alternate: from->to->from (반복효과)

animation: changewith 3s linear 1s 6 alternate;
위와 같이 한줄로 작성 가능하다.
순서는 상관 없지만 예외적으로 시간(duration, delay)은 먼저 나오는 게 duration이다.

@keyframes

animation은 항상 @keyframes를 같이 설정해줘야 한다.

[형식]
@keyframes animation-name {
from {
transition 시작 지점의 css속성
}
to {
transition 끝 지점의 css속성
}

ex.

.box1 {
    width: 300px;
    height: 300px;
    background-color: red;

    animation: roatation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from {
        transform: rotate(-10deg);
    }
    to {
        transform: rotate(10deg);
    }
}