[복습]css 거기에 Animation을 곁들인

제목은 너무 많이 배웠서 기억나는 css입니다 animation을 곁들인

개인적으로 animation효과를 그렇게 좋아하진 않지만 있고 없고 차이는 확실히 있는 것 같다

그리고 아주 재밌고 신나고 기대되는 과제도 하나 나와서 너무 힘드네요 ...

 

#1 Animation

---

• 화면상에서 보이는 여러 가지 모션
• JS 없이 요소들에 애니메이션 효과를 적용
• 애니메이션을 나타내는 css스타일과 중간중간의 상태를 나타내는 keyframe으로 이루어짐

transition vs animation?

transition은 요소의 상태가 변경돼야 애니메이션을 실행하지만, animation은 요소의 상태변화와 관계없이 애니메이션 실행

 

keyframes?

두 개이상의 애니메이션의 중간의 상태를 설정하며 0%(시작지점)에서 100%(종료지점)으로 나타냄

 

 

licat님 캐릭터 하지만 귀여웠죠....이러한 여러가지 이미지들이 한컷한컷 보이게해서 움직이는 이미지를 만들 수 있음.

귀여워 ....

 

animation-name

animation-name의 시작에는 영문 소문자, 문자열, 언더바(_), 하이픈(-)을 사용합니다. 영문 대문자, 숫자, 특수문자는 사용할 수 없음

 

animation-duration

애니메이션이 한사이클을 완료하는데 걸리는 시간을 의미하며 음수값으로 설정하면 애니메이션이 실행되지 않음

 

animation-timing-function

애니메이션이 진행되는 방식을 설정

• 애니매이션이 진행되는 방식을 설정합니다.
• 기본값 ease : 애니메이션 중간으로 갈수록 속도가 증가하고 끝에서 다시 느려집니다.
• linear: 균일한 속도로 움직입니다
• steps(n) : n개의 단계

 

개발자 도구에서도 조절이 가능 https://easings.net/ <-에도 참고자료 있음

 

animation-delay

애니메이션이 얼마나 시간이 지나서 시작될지를 설정하며 음수값을 입력시 애니메이션이 중간부터 시작

 

animation-iteration-count

애니메이션의 재생 횟수를 설정하며 infinite를 적용시 무한반복을 함

 

animation-direction

• 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 설정
  • normal: 기본값. 정방향으로 재생.
  • reverse: 역방향 재생
  • alternate: 정방향, 역방향 반복
  • alternate-reverse: 역방향, 정방향 반복

 

사실더 많은 기능들이야 있겠지만 animation은 단축속성으로 사용할것 같다...... 하나하나 쳐주는게 절대 귀찮은건 아니고 ...

 

 

animation

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

영어, 영어, 영어, 영어라 어려울 수 있지만 코드로 보면 쉽다

 

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

예전에 JS공부할때 메소드체이닝도 뭔가 이런식으로 줄줄이 다 썼던거 같은데...

마지막으로 animation에 관한 재밌는 예제를 모아놓은 사이트로 오늘은 여기까지 :)

클릭시 홈페이지 이동