[CSS] CSS 애니메이션에 대해 알아보자!

CSS : 애니메이션(animation)

이번 시간에는 CSS로 표현할 수 있는 애니메이션 속성들에 대해 알아보겠습니다! 😄

---

#1. animation 속성의 기본 표현

animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state

애니메이션: 이름 | 지속시간 | 타이밍 기능 | 지연시간 | 방향 | 채우기 모드 | 재생 상태

---

#2. animation의 종류

다음은 animation의 종류입니다~! 표를 보며 함께 알아봅시다!

종류	예시
animation-name	@keyframe에 지정된 이름을 설정합니다.
animation-duration	애니메이션이 실행되는 시간을 설정합니다.
animation-timing-function	애니메이션 키프레임 움직임을 설정합니다.
animation-delay	애니메이션이 시작되기 전까지 시간을 설정합니다.
animation-iteration	애니메이션 반복 횟수를 설정합니다.
animation-derection	애니메이션 방향을 설정합니다.
animation-fill-mode	애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다.
animation-play-state	애니메이션 실행 상태를 설정합니다.

---

#3. transtion 종류

다음은 animation의 transtion 종류입니다~! 표를 보며 함께 알아봅시다!

종류	예시
transition-property	트렌지션을 적용할 CSS 속성 대상을 설정합니다.
transition-druation	트렌지션 작동시간을 설정합니다.
transition-timing-function	트렌지션 움직임 효과를 설정합니다.
transition-delay	트렌지션이 시작되기 전까지 시간을 설정합니다.

---

#4. timing-function 종류

다음은 animation의 transtion 종류입니다~! 표를 보며 함께 알아봅시다!

종류	예시
transition-property	트렌지션을 적용할 CSS 속성 대상을 설정합니다.
transition-druation	트렌지션 작동시간을 설정합니다.
transition-timing-function	트렌지션 움직임 효과를 설정합니다.
transition-delay	트렌지션이 시작되기 전까지 시간을 설정합니다.

#4-2. timing-function 예시

다음은 animation의 transtion 예시 입니다~! 애니메이션과 코드를 보며 각각 어떤 효과인지 알아봅시다!

📖 timing-function

linear

ease

ease-in

ease-out

ease-in-out

💡 CSS 코드 보기

.timing1.show {animation: move 2s 1 linear;}
.timing2.show {animation: move 2s 1 ease;}
.timing3.show {animation: move 2s 1 ease-in;}
.timing4.show {animation: move 2s 1 ease-out;}
.timing5.show {animation: move 2s 1 ease-in-out;}

@keyframes move {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}

📖 timing-function

step-start

step-end

steps(4, start)

steps(4, end)

steps(10, start)

steps(10, start)

💡 CSS 코드 보기

.timing6.show {animation: move 4s 1 step-start;}
.timing7.show {animation: move 4s 1 step-end;}
.timing8.show {animation: move 4s 1 steps(4, start);}
.timing9.show {animation: move 4s 1 steps(4, end);}
.timing10.show {animation: move 4s 1 steps(10, start);}
.timing11.show {animation: move 4s 1 steps(10, end);}

📖 cubic-bezier

timing12

timing13

timing14

timing15

timing16

💡 CSS 코드 보기

.timing12.show {animation: move 3s 2 cubic-bezier(0,.71,0,1);}
.timing13.show {animation: move 3s 2 cubic-bezier(0,.71,1,-0.28);}
.timing14.show {animation: move 3s 2 cubic-bezier(1,-0.52,1,-0.28);}
.timing15.show {animation: move 3s 2 cubic-bezier(1,.02,0,1.01);}
.timing16.show {animation: move 3s 2 cubic-bezier(.33,2.04,1,2.05);}

📖 animation-delay

timing17

timing18

timing19

timing20

💡 CSS 코드 보기

.timing17.show {animation: move 3s 0.1s 2 ease;}
.timing18.show {animation: move 3s 0.2s 2 ease;}
.timing19.show {animation: move 3s 0.3s 2 ease;}
.timing20.show {animation: move 3s 0.4s 2 ease;}

📖 animation-delay

timing21

timing22

timing23

timing24

💡 CSS 코드 보기

.timing21.show {animation: move 1s 1 ease;}
.timing22.show {animation: move 1s 2 ease;}
.timing23.show {animation: move 1s 3 ease;}
.timing24.show {animation: move 1s infinite ease;}

📖 animation-direction

timing25

💡 CSS 코드 보기

.timing25.normal {animation: move2 4s 5 ease normal;}
.timing26.reverse {animation: move2 4s 5 ease reverse;}
.timing27.alternate {animation: move2 4s 5 ease alternate;}
.timing28.alternate-reverse {animation: move2 4s 5 ease alternate-reverse;}

📖 animation-fill-mode

timing26

timing27

timing28

timing29

💡 CSS 코드 보기

.timing26.show {animation: move3 3s 1 ease; animation-fill-mode: none;}
.timing27.show {animation: move3 3s 1 ease; animation-fill-mode: forwards;}
.timing28.show {animation: move3 3s 1 ease; animation-fill-mode: backwards;}
.timing29.show {animation: move3 3s 1 ease; animation-fill-mode: both;}
@keyframes move3 {
0% {left: 0%;}
100% {left: calc(100% - 120px);}
}

📖 animation-play-state

timing31

💡 CSS 코드 보기

.timing30.running {animation: move2 4s 100 ease; animation-play-state: running;}
.timing30.paused {animation: move2 4s 100 ease; animation-play-state: paused;}
}

📖 Animatine.css

timing31

timing32

timing33

timing34

timing35

timing36

timing37

💡 CSS 코드 보기

.timing30.running {animation: move2 4s 100 ease; animation-play-state: running;}
.timing30.paused {animation: move2 4s 100 ease; animation-play-state: paused;}
}

---

맛나는 댓글 영양분과 구독 영양분을 환영합니당🌱