DAY-34. 애니메이션

🎨 2022-04-20

CSS 기초

❗ 수업을 듣고, 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

🔔Position

div요소 가운데 배치

• 부모의 position이 relative 이면서, 움직이고 싶은 div가 absolute 이면 div안에서 가운데 배치
• 부모의 postion이 relative가 아니면 화면 정가운데 위치

사용법

1. top : 50% , left : 50%후
2. transform: translate(-50%, -50%); 사용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

🔔transition

속성을 서서히 변화시키는 속성

1. transition-property :트랜지션 적용 속성 지정
2. transition-duration : 트랜지션 총 적용 시간
3. transition-timing-function : 트랜지션 적용 속도 조절
4. transition-delay : 트랜지션 시작 시간 연기

transition의 속성들은 원래의 class에 넣어주기

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

❗ 부자연스러움

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

• 돌아올 때 한번에 훅 돌아옴 hover에 transition 특성을 넣으면

🔔z-index

1. 기본

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

1. z-index 적용

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.