Transition and Animation

Keyword overview

---

Null

---

---

The Code Card

---

transform

https://lshjju.tistory.com/748

transform

---

transition

https://lshjju.tistory.com/749

transition

---

CSS Animation and @keyframes

https://lshjju.tistory.com/750

CSS Animation and @keyframes

---

translate() center center alignment

https://lshjju.tistory.com/711

translate() center center alignment

---

 

---

14-1 트랜스폼 알아보기

---

---

transform 과 트랜스폼 함수

---

---

2차원 트랜스폼과 3차원 트랜스폼

---

---

웹 요소를 이동시키는 translate() 함수

---

translate 함수로 웹 요소 이동하기
https://github.com/lshjju/doit-hcj-new/blob/main/14/results/translate.html

 

트랜지션 효과 추가하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/translate.html

---

---

요소를 확대 축소하는 scale() 함수

---

scale() 함수를 사용해 확대 축소하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/scale.html

---

---

요소를 회전시키는 rotate() 함수

---

---

2차원 rotate() 함수

---

함수를 사용해 2차원에서 회전하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/rotate.html

---

---

3차원 rotate() 함수와 perspective 속성

---

이미지 회전하며 원근감 주기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/perspective.html

 

rotate() 함수를 사용해 3차원에서 회전하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/rotate3d.html

---

---

요소를 비틀어 왜곡하는 skew() 함수

---

skew() 함수로 도형 비틀기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/skew.html

---

---

14-2 트랜지션 알아보기

---

---

트랜지션이란

---

---

트랜지션과 속성

---

---

트랜지션의 대상을 지정하는 transition-property

---

---

트랜지션의 진행 시간을 지정하는 transition-duration

---

---

트랜지션의 속도 곡선을 지정하는 transition-timing-function

---

---

트랜지션의 지연 시간을 설정하는 transition-delay

---

---

트랜지션의 속성을 한꺼번에 표기하는 transition

---

트랜지션 속성을 한꺼번에 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/tr-1.html

---

---

실습

---

마우스 오버하면 상품 정보 표시하기

 

1단계 HTML 파일 살펴보기

2단계 CSS 파일 수정하고 저장하기

3단계 마우스 포인터를 올리면 상품 설명 글 보여 주기

 

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/product.html

 

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/css/product.css

---

---

14-3 애니메이션 알아보기

---

---

css 애니메이션에서 사용하는 속성

---

---

애니매이션의 지점과 이름을 설정하는 @keyframes, animation-name 

---

애니메이션 정의하기

animation-name 속성 사용하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/ani-1.html

---

---

애니매이션의 실행 시간을 지정하는 animation-duration

---

animation-duration 속성 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/ani-1.html

---

---

반복 횟수를 지정하는 animation-iteration-count 

---

---

애니매이션의 방향을 지정하는 animation-direction 

---

왕복하는 애니메이션 만들기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/ani-2.html

---

---

애니매이션의 속도 곡선을 지정하는 animation-timing-function

---

---

애니매이션의 속성을 한꺼번에 표기하는 animation

---

애니메이션 2개를 한꺼번에 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/ani-3.html

---

---

실습 - 트랜스폼과 트랜지션을 사용해 버튼 효과 만들기

---

1단계 동적인 효과가 완료됐을 때 스타일 만들기

2단계 배경과 글자 나타내기

3단계 동적 효과의 모양 개선하기

4단계 동적 효과 구현하기

 

준비

https://github.com/lshjju/doit-hcj-new/blob/main/14/button.html

결과

https://github.com/lshjju/doit-hcj-new/blob/main/14/results/button.html

---

---

---

Copyright

이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB

---