Animation

유저의 액션이 필요한 transition과 달리 Animation은 유저의 액션 없이도 요소의 스타일이 계속 변경된다. 물론, 마우스 호버 했을 때 애니메이션이 작동되도록 설정할 수도 있다.

@keyframes

개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정할 수 있다.

✔️@keyframes 로 만들어 놓은 애니메이션을 각 class 등의 요소에 넣어서 적용시키는 느낌!

[html]

<div class='box'>hi</div>

[css]

.box {
	width: 100px;
    height: 100px;
    border: 10px solid green;
    animation: my-first-animation 2s infinite alternate;
}
@keyframes my-first-animation(이름 설정) {
	from { width: 100px; }
    to { width: 300px; }

이렇게 하면 2초동안 변하는, 무한으로 반복하는 애니메이션이 만들어진다.

---

또다른 방법으로는,

@keyframes my-first-animation {
0% {
    font-size: 20px;
}
50% {
    width: 300px;
    font-size: 80px;
}
100% {
    font-size: 20px;
}

이렇게 %로 키프레임을 표현할 수 있다.

---

animation-iteration-count

애니메이션이 몇 번 반복될지 지정한다.
infinite: 무한 반복

---

animation-name

@keyframes의 이름이다.
a to z, 0 to 9, underscore(_), dash(-) => 이름에 사용 가능하다.

@keyframes rotate =>회전시킨다.

---

animation-duration

키프레임 하나(한 사이클)가 완료되기까지 걸리는 시간
초(s), 밀리 초 (ms)로 지정 될 수 있다. 음수 값은 유효하지 않다.

---

animation-delay

애니메이션이 시작할 시점을 지정한다.
값: <time>: 필수로 작성해야한다.

---

animation-play-state

값: running (기본값), paused

ex)

.box1: hover {
animation-play-state: paused;
}

이렇게 하면 호버했을 때 멈추는 애니메이션이 만들어진다.

---

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
forwards/backwards를 통해 0%를 유지할건지, 100%를 유지할건지 지정한다.

---

한 줄로 적을 때 이 순서로

duration timing delay iteration-count direction animation-fill-mode state name

animation: 3s ease-in 1s infinite reverse both running slidein